Created
April 21, 2016 10:01
-
-
Save anonymous/4c37fbfd050f748b68545ed81d4d0e29 to your computer and use it in GitHub Desktop.
Revisions
-
Anonymous created this gist
Apr 21, 2016 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,7 @@ Animated Intro With jQuery -------------------------- A [Pen](http://codepen.io/Mhmdhasan/pen/LNrJbo) by [Mohamed Hasan](http://codepen.io/Mhmdhasan) on [CodePen](http://codepen.io/). [License](http://codepen.io/Mhmdhasan/pen/LNrJbo/license). This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,37 @@ <div class="intro"> <div class="slide slide-d"> <div class="slide-content"> <h2>Thanks for watching </h2> <p>Please check me on</p> <p><a href="http://mohamdhasan.tk/" target="_blank">Mohamdhasan.tk</a></p> <br/><button>Replay</button> </div> </div> <div class="slide slide-c"> <div class="slide-content"> <h2>What I use</h2> <p>Adobe Photoshop CS6</p> <p>HTML5 / CSS3</p> <p>jQuery library</p> </div> </div> <div class="slide slide-b"> <div class="slide-content"> <h2>what I do</h2> <p>I design modern, clean and creative websites</p> <p>And make them alive on the internet</p> </div> </div> <div class="slide slide-a"> <div class="slide-content"> <h1>Hi There!</h1> <p>My name is Mohamed</p> <p>I'm a Front End web developer</p> </div> </div> </div> This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,117 @@ $(document).ready(function () { 'use strict'; var slideA = $('.slide-a'), slideB = $('.slide-b'), slideC = $('.slide-c'), slideD = $('.slide-d'), slide = $('.slide'), replay = $('button') slide.hide(); // Slide A function showSlideA() { slideA.fadeIn().delay(2500).fadeOut(); $('.slide-a h1').animate({'opacity': '1'}); $('.slide-a p:first').delay(500).animate({'opacity': '1'}); $('.slide-a p:last').delay(1000).animate({'opacity': '1'}); }; // Slide B function showSlideB() { slideB.fadeIn().delay(6600).queue(function (next) { $(this).css({'opacity': '0','transform': 'scaleX(0)'}); next(); }); $('.slide-b h2') .delay(3300) .queue(function (next) { $(this).css({'opacity': '1', 'transform': 'translateY(0)'}); next(); }); $('.slide-b p:first') .delay(3600) .queue(function (next) { $(this).css({'opacity': '1', 'transform': 'translateY(0)'}); next(); });$('.slide-b p:last') .delay(3800) .queue(function (next) { $(this).css({'opacity': '1', 'transform': 'translateY(10px)'}); next(); }); }; // Slide C function showSlideC() { slideC.fadeIn().delay(8800).fadeOut(); $('.slide-c h2') .delay(7000) .queue(function next() { $(this).css({'transform': 'scale(1)', 'opacity': '1'}); next(); }); $('.slide-c p:first') .delay(7100) .queue(function next() { $(this).css({'transform': 'scale(1)', 'opacity': '1'}); next(); }); $('.slide-c p:nth-of-type(2)') .delay(7200) .queue(function next() { $(this).css({'transform': 'scale(1)', 'opacity': '1'}); next(); }); $('.slide-c p:last') .delay(7300) .queue(function next() { $(this).css({'transform': 'scale(1)', 'opacity': '1'}); next(); }); } // Slide D function showSlideD() { slideD.fadeIn(); $('.slide-d h2') .delay(9600) .queue(function next() { $(this).css({'opacity': '1'}); next(); }); $('.slide-d p:first') .delay(9900) .queue(function next() { $(this).css({'opacity': '1'}); next(); }); $('.slide-d p:last') .delay(10100) .queue(function next() { $(this).css({'opacity': '1'}); next(); }); replay .delay(10300) .queue(function next() { $(this).css({'transform': 'scale(1)', 'opacity': '1'}); next(); }); } $(window).load(function () { showSlideA(showSlideB(showSlideC(showSlideD()))); }); // replay replay.on('click', function () { location.reload(true); }); }); This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1 @@ <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,151 @@ *,*::before,*::after box-sizing: border-box outline: none $pink: #f26060 $green: #1bcc87 $lightblue: #9ab7c2 $darkblue: #3e454d $orange: #ff8071 $primary-color: $pink $font: 'Nunito', sans-serif $sub-font: 'Ubuntu', sans-serif %transition-normal transition: all 1s cubic-bezier(1.000, -0.565, 0.075, 1.495) %transition-slow transition: all .5s ease-in-out h1,h2,p,button margin: 10px 0 opacity: 0 h2 font-size: 65px p font-size: 24px font-family: $sub-font font-weight: 300 body text-align: center background: $primary-color color: #fff font-family: $font .intro width: 100vw height: 100vh overflow: hidden position: relative > div width: 100% height: 100% display: flex align-items: center justify-content: center position: absolute top: 0 left: 0 transform-origin: top left padding: 20px .slide-content display: inline-block .slide-a background: $pink h1 font-size: 70px .slide-b background: $green @extend %transition-slow h2 transform: translateY(-200px) @extend %transition-normal p transform: translateY(200px) @extend %transition-normal .slide-c background: $darkblue @extend %transition-slow h2,p transform: scale(.4) @extend %transition-normal p display: inline-block &::after content: "" display: inline-block width: 8px height: 8px border-radius: 50% background: #fff margin: 0 10px &:last-of-type::after display: none .slide-d background: $orange h2,p @extend %transition-slow p display: inline-block a color: #CC584C display: inline-block text-decoration: none &:hover::after width: 100% &::after content: "" display: block width: 1px height: 1px background: #CC584C transition: all .3s button width: 100px height: 100px line-height: 100px border: none color: #fff border-radius: 50% text-align: center background: #CC584C margin-top: 20px border: 2px solid transparent transition: all .3s ease-in-out transform: scale(.7) &:hover background: none border: 2px solid #CC584C color: #CC584C @media screen and (max-width: 768px) h1 font-size: 40px h2 font-size: 30px p font-size: 17px display: block !important .slide-d button width: 70px height: 70px line-height: 70px margin-top: 0 font-size: 14px