Контакты

Заметки Веб-разработчика

Полезная информация для исполнителей и заказчиков

Крутые эффекты с тенями для сайта. Работа с тенями в CSS

В этом видео вы увидите как реализовать подобные штуки с помощью CSS на своем сайте. Вы узнаете о нескольких вариантах создания таких теневых эффектов.

HTML Разметка

<section id = "firstSection">
	<h2>dimensionality</h2>
	<div></div>
</section>
<section id = "secondSection">
	<h2>unusualness</h2>
	<img src = "img/triangle.png" />
</section>
<section id = "thirdSection">
	<h2>greatness</h2>
	<div id = "top"></div>
	<div id = "bottom"></div>
</section>

CSS Стили

section
{
	height: 100vh;
	position: relative;
}
h2
{
	color: white;
	font-weight: 900;
	font-size: 120px;
	text-transform: uppercase;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%) skew(-10deg);
	opacity: 0;
	transition: 2s;
}

#firstSection
{
	background-color: #5979e0;
}
#firstSection div
{
	height: 180vh;
	width: 300px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%) rotate(-45deg);
	transition: 2s;
}

#secondSection
{
	background-color: #dd1c73;
}
#secondSection img
{
	width: 800px;
	position: absolute;
	top: 48%;
	left: 54%;
	transform: translate(-50%,-50%) rotate(-40deg);
	opacity: 0;
	transition: 2s;
}

#thirdSection
{
	background-color: #ff8914;
}
#thirdSection h2
{
	padding: 70px 150px;
	width: 700px;
	background-color: #ff8914;
	z-index: 1;
}
#top
{
	height: 0;
	width: 700px;
	position: absolute;
	top: 45%;
	left: 30%;
	transform: rotate(-8deg);
	transition: 2s;
}
#bottom
{
	height: 0;
	width: 700px;
	position: absolute;
	bottom: 44%;
	left: 30%;
	transform: rotate(-8deg);
	transition: 2s;
}

JavaScript Код

$(document).ready(function()
{
	$('#firstSection').viewportChecker(
	{
		callbackFunction: function(elem, action){
			setTimeout(function(){$("#firstSection h2").css("opacity", "1");},1000);
			setTimeout(function(){$("#firstSection div").css("box-shadow", "0 0 80px black");},1500);
    	},
	});
	$('#secondSection').viewportChecker(
	{
		callbackFunction: function(elem, action){
			setTimeout(function(){$("#secondSection h2").css("opacity", "1");},500);
			setTimeout(function(){$("#secondSection img").css({"opacity":"1", "transform":"translate(-50%,-50%) rotate(40deg)"});},500);
    	},
	});
	$('#thirdSection').viewportChecker(
	{
		callbackFunction: function(elem, action){
			setTimeout(function(){$("#thirdSection h2").css("opacity", "1");},500);
			setTimeout(function(){$("#top").css("box-shadow", "0px 0px 120px 40px rgba(0, 0, 0, 0.8)");},1500);
			setTimeout(function(){$("#bottom").css("box-shadow", "0px 0px 120px 40px rgba(0, 0, 0, 0.8)");},1500);
    	},
	});
});


Оставьте свой комментарий внизу