Magic Slider

слайдер для портфолио

by Denis Tverdokhlebov

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<div class="shadow-title parallax-top-shadow">work</div>
  <div class="section-parallax parallax-00" style="background-image: url('http://www.ivang-design.com/svg-load/parallax/parallax-0.png');"></div>
  <div class="section-parallax parallax-01" style="background-image: url('http://www.ivang-design.com/svg-load/parallax/parallax-01.png');"></div>

<div class="section full-height">
  <div class="section-title-wrap">
    <div class="container">
      <div class="row">
        <div class="col-12 text-center parallax-fade-top">
          <p>we do magic</p>	
          <h1>chase your<br>passion</h1>
        </div>
      </div>	
    </div>
  </div>
</div>

<div class="section full-height z-bigger">
  <ul class="case-study-wrapper">
    <li class="case-study-name">                            	
      <a href="#" class="hover-target">light</a>
    </li>
    <li class="case-study-name">                                         	
      <a href="#" class="hover-target">flare</a>
    </li>
    <li class="case-study-name">                                        	
      <a href="#" class="hover-target">nature</a>
    </li>
    <li class="case-study-name">                                         	
      <a href="#" class="hover-target">fire</a>
    </li>
  </ul>
  <ul class="case-study-images">
    <li>
      <div class="img-hero-background">
        <img src="http://www.ivang-design.com/svg-load/parallax/light.jpg" alt="">
      </div>  
      <div class="hero-number-back">01</div> 
      <div class="hero-number">01</div> 
      <div class="hero-number-fixed">04</div> 
      <div class="case-study-title">graphic design, interaction</div> 
    </li>
    <li>
      <div class="img-hero-background">
        <img src="http://www.ivang-design.com/svg-load/parallax/flare.jpg" alt="">
      </div> 
      <div class="hero-number-back">02</div> 
      <div...

CSS

/* ======================================== * 
		        BEST VIEWED FULLSCREEN
   https://codepen.io/ig_design/full/GPVXVx
 * ======================================== */

@import url('https://fonts.googleapis.com/css?family=Muli:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i&subset=latin-ext,vietnamese');

body{
	width: 100%;
	display: block;
	overflow-x: hidden;
	background-color: #1f2029;
  color: #c4c3ca;
	font-family: 'Muli', sans-serif;
}
::selection {
	background-color: #000;
  color: #fff;
}
::-moz-selection {
	background-color: #000;
  color: #fff;
}
a:hover{
  text-decoration: none;
}
/* #Cursor
================================================== */

.cursor,
.cursor2,
.cursor3{
	position: fixed;
	border-radius: 50%;	
	transform: translateX(-50%) translateY(-50%);
	pointer-events: none;
	left: -100px;
	top: 50%
}
.cursor{
	background-color: #fff;
	height: 0;
	width: 0;
	z-index: 99999;
}
.cursor2,.cursor3{
	height: 36px;
	width: 36px;
	z-index:99998;
	-webkit-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out
}
.cursor2.hover,
.cursor3.hover{
	-webkit-transform:scale(2) translateX(-25%) translateY(-25%);
	transform:scale(2) translateX(-25%) translateY(-25%);
	border:none
}
.cursor2{
	border: 2px solid #fff;
	box-shadow: 0 0 22px rgba(255, 255, 255, 0.6);
}
.cursor2.hover{
	background: rgba(255,255,255,.1);
	box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}
@media screen and (max-width: 1200px){
	.cursor,.cursor2,.cursor3{
		display: none
	}
}

.shadow-title{
	position: fixed;
	top: 0;
	margin-top: 30px;
	left: 20px;
	width: 100%;
	height: 300%;
	text-align: left;
	font-family: 'Muli', sans-serif;
	-webkit-writing-mode: vertical-lr;
	writing-mode: vertical-lr;
	font-size: 18vw;
	line-height: 1;
	color: rgba(200,200,200,.1);
	background: linear-gradient(90deg, rgba(200,200,200,0), rgba(200,200,200,0.35));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 900;
	z-index:...

JavaScript

(function($) { "use strict";
 
 	//Parallax            
              
	function scrollBanner() {
	  $(document).on('scroll', function(){
      var scrollPos = $(this).scrollTop();
        $('.parallax-fade-top').css({
          'top' : (scrollPos/2)+'px',
          'opacity' : 1-(scrollPos/700)
        });
        $('.parallax-00').css({
          'top' : (scrollPos/-3.5)+'px'
        });
        $('.parallax-01').css({
          'top' : (scrollPos/-2.8)+'px'
        });
        $('.parallax-top-shadow').css({
          'top' : (scrollPos/-2)+'px'
        });
      });    
	  }
	scrollBanner();	              

	//Page cursors

    document.getElementsByTagName("body")[0].addEventListener("mousemove", function(n) {
        t.style.left = n.clientX + "px", 
		t.style.top = n.clientY + "px", 
		e.style.left = n.clientX + "px", 
		e.style.top = n.clientY + "px", 
		i.style.left = n.clientX + "px", 
		i.style.top = n.clientY + "px"
    });
    var t = document.getElementById("cursor"),
        e = document.getElementById("cursor2"),
        i = document.getElementById("cursor3");
    function n(t) {
        e.classList.add("hover"), i.classList.add("hover")
    }
    function s(t) {
        e.classList.remove("hover"), i.classList.remove("hover")
    }
    s();
    for (var r = document.querySelectorAll(".hover-target"), a = r.length - 1; a >= 0; a--) {
        o(r[a])
    }
    function o(t) {
        t.addEventListener("mouseover", n), t.addEventListener("mouseout", s)
    }              
              
  
//Scroll back to top
              
$(document).ready(function() {	
		var offset = 300;
		var duration = 400;
		jQuery(window).on('scroll', function() {
			if (jQuery(this).scrollTop() > offset) {
				jQuery('.scroll-to-top').addClass('active-arrow');
			} else {
				jQuery('.scroll-to-top').removeClass('active-arrow');
			}
		});				
		jQuery('.scroll-to-top').on('click', function(event) {
			event.preventDefault();
			jQuery('html, body').animate({scrollTop:...