Scroll Animation

Scroll Animation

// // Apparently doesn't work on smartphones with Chrome.

// HTML

<section id="about" class="s-about bg-light">
			<div class="section-header">
				<h2>Обо мне</h2>
				<div class="s-descr-wrap">
					<h6>Познакомимся ближе</h6>
				</div>
			</div>
			<div class="section-content-about">
				<article class="animation-left">
					<h4>Немного о себе</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ullam a, repellat impedit soluta perferendis odit atque eius dicta. Esse, officiis libero dolor accusamus, modi nesciunt cupiditate at fuga distinctio.</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ullam a, repellat impedit soluta perferendis odit atque eius dicta. Esse, officiis libero dolor accusamus, modi nesciunt cupiditate at fuga distinctio.</p>
				</article>
				<article class="animation-center">
					<h4>Фото</h4>
					<div class="person">
						<img src="img/photo.jpg" alt="Alt">
					</div>
				</article>
				<article class="animation-right">
					<h4>Персональная информация</h4>
					<h5>Леонардо да Винчи</h5>
					<ul class="info">
						<li>Профессиональное создание сайтов: разработка дизайна, верстка</li>
						<li>День рождения: 1 мая 1962 года</li>
						<li>Номер телефона: +9 999 999 99 99</li>
						<li>Email: <a href="mailto: [email protected]">[email protected]</a></li>
						<li>Веб-сайт: <a href="http://portfolio.vassiliev.org/" target="_blank">portfolio.vassiliev.org</a></li>
					</ul>
				</article>
			</div>
		</section>
		
// CSS

.section-header
	+animation-delay(.5s)

.s-descr-wrap
	h6
		margin-bottom: rem(60)
		&::after
			content: ""
			height: rem(1)
			left: 50%
			margin: rem(50) 0 0 rem(-75)
			position: absolute
			width: rem(150)

.main-footer
	padding: rem(50) 0

.section-content-resume,
.section-content-about
	+display(flex)
	+align-items(flex-start)
	+justify-content(center)
	+flex-wrap(wrap)
.s-about
	article
		padding: rem(20)
		position: relative
		width: 33.33%
		h4
			margin-bottom: rem(30)
.person
	img
		border-radius: 50%
		display: block
		margin: 0 auto
		width: 50%

ul.info
	margin: 0 auto
	text-align: left
	li
		list-style: disc
	a
		color: black
		display: inline
		letter-spacing: normal
		padding: 0
		text-transform: lowercase
		+transition(all .4s ease)
		&:hover
			background-color: rgba(255,255,255,.05)
			
// Javascript

//Animate CSS + WayPoints javaScript Plugin
//Example: $(".element").animated("zoomInUp", "zoomOutDown");
//Author URL: http://webdesign-master.ru
(function($) {
		$.fn.animated = function(inEffect, outEffect) {
				$(this).css("opacity", "0").addClass("animated").waypoint(function(dir) {
						if (dir === "down") {
								$(this).removeClass(outEffect).addClass(inEffect).css("opacity", "1");
						} else {
								$(this).removeClass(inEffect).addClass(outEffect).css("opacity", "1");
						};
				}, {
						offset: "80%"
				}).waypoint(function(dir) {
						if (dir === "down") {
								$(this).removeClass(inEffect).addClass(outEffect).css("opacity", "1");
						} else {
								$(this).removeClass(outEffect).addClass(inEffect).css("opacity", "1");
						};
				}, {
						offset: -$(window).height()
				});
		};
})(jQuery);

$('.top-text h1').animated('fadeInDown', 'fadeOutUp');
	$('.top-text h5, .section-header').animated('fadeInUp', 'fadeOutDown');
	$('.animation-left').animated('fadeInLeft', 'fadeOutLeft');
	$('.animation-right').animated('fadeInRight', 'fadeOutRight');
	$('.animation-center').animated('flipInY', 'fadeOutY');
	$('.left .resume-item').animated('fadeInLeft', 'fadeOutLeft');
	$('.right .resume-item').animated('fadeInRight', 'fadeOutRight');