alexvas123

// HTML

<article class="tabs">
<div class="tab">
<input type="radio" name="css-tabs" id="tab-1" checked class="tab-switch">
<label for="tab-1" class="tab-label">Текст</label>
<div class="tab-content">
<div class="tab-content-text">
<div class="tab-text">
<p>Главные героини сериала Absolutely Fabulous (&ldquo;Абсолютно невероятно&rdquo;) &#8211; две подруги, которые отказываются стареть. Они курят, пьют, употребляют наркотики &#8211; морально разлагаются всеми возможными способами, как в молодости.</p>

alexvas123

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

$(window).scroll(function (event) {
			var y = $(this).scrollTop();
			if (y >= 500) {
				$('.class').addClass('animated fadeInDown');
			}
		});
		
// Needs Animate.css

alexvas123

// HTML

<div class="toggle-mnu">
	<div class="sandwich">
		<div class="sw-topper"></div>
		<div class="sw-bottom"></div>
		<div class="sw-footer"></div>
	</div>
</div>
<nav class="top-mnu animated fadeInUp">

alexvas123

// // 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>

alexvas123

// HTML

<section id="portfolio" class="s-portfolio bg-dark">
			<div class="section-header">
				<h2>Портфолио</h2>
				<div class="s-descr-wrap">
					<h6>Мои последние работы</h6>
				</div>
			</div>
			<div class="section-content">

alexvas123

// jQuery

$("a[href^='#section']").on('click', function (event) {
		var target = $(this.getAttribute('href'));
		if (target.length) {
			event.preventDefault();
			$('html, body').stop().animate({
				scrollTop: target.offset().top
			}, 1000);
		}

alexvas123

// HTML

<p class="link-button">
	<a href="#subscribe">Подписаться</a>
</p>

<div id="subscribe" class="modal">
						<div class="content">
							<form class="forms">
								<h4>Подписка:</h4>

alexvas123

.link-button
	text-align: center
	a
		background-color: $alert-color
		border: .2rem solid $alert-color
		color: #fff
		display: inline-block
		font-family: OpenSansBold, $helvetica
		font-size: 1.5rem
		font-weight: normal

alexvas123

// CSS Loop

li
		@for $i from 1 through 6
			&:nth-child(#{$i})
				animation-duration: 400ms * $i

alexvas123

// Vivus SVG animation

// Initial CSS: display: none

	var details = {
		type: "delayed",
		duration: 200,
		animTimingFunction: Vivus.EASE
	};