Parallax landing test

Developer
Sabin Tudor
Size
9,529 Kb
Views
8,096
  1. Parallax landing test Previews
  2. Parallax landing test HTML Codes
  3. Parallax landing test CSS Codes
  4. Parallax landing test JS Codes

How do I make an parallax landing test?

What is a parallax landing test? How do you make a parallax landing test? This script and codes were developed by Sabin Tudor on 03 January 2023, Tuesday.

Parallax landing test Previews
IQ Test

Parallax landing test - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Parallax landing test</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/aykgj.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="debug"> <button id="test">shuffle test</button>
</div>
<div class="fx"> <div id="motd"></div> <div class="artefacts"> <img src="http://i.imgsafe.org/7192a62.png" /> <img src="http://i.imgsafe.org/0ba31dc.png" /> </div> <ul class="layers" data-friction-x="0.03" data-friction-y="0.05"> <li class="layer" data-depth="0.15"> <div id="dust-1" class="dust"></div> </li> <li class="layer" data-depth="0.25"> <div id="dust-2" class="dust"></div> </li> <li class="layer" data-depth="0.45"> <div id="dust-3" class="dust"></div> </li> </ul> <div class="bg"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://wagerfield.github.io/parallax/deploy/parallax.js'></script> <script src="js/index.js"></script>
</body>
</html>

Parallax landing test - Script Codes CSS Codes

// fonts
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);
@import url(https://fonts.googleapis.com/css?family=Exo:400,500,600,700,900);
// images
$bg: 'http://i.imgsafe.org/5f6c650.jpg';
//$guy: 'http://i.imgsafe.org/7192a62.png';
//$hand: 'http://i.imgsafe.org/0ba31dc.png';
$dust: ( 'http://i.imgsafe.org/b55c74c.jpg', 'http://i.imgsafe.org/d3dbfcd.jpg', 'http://i.imgsafe.org/d9d745e.jpg'
);
// animations
$ease: 'cubic-bezier(0.23, 0.18, 1,-0.11)';
body { position: relative; font-family: "Open Sans", sans-serif; font-size: 30px; line-height: 1.2; color: #fff; background: #000;
}
#debug { opacity: 0; z-index: 100; position: absolute; top: 0; right: 0; padding: 10px; background: rgba(255, 0, 0, 0.7); font-size: 12px; color: #000; &:hover { opacity: 1; }
}
#motd { z-index: 3; position: absolute; top: 50%; left: 0; transform: translateY(-50%); max-width: 400px; padding: 40px; color: #fff; font-family: 'Exo', sans-serif; font-size: 40px; font-weight: 700; text-transform: uppercase; white-space: pre; text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.6); span { color: #68d46d; }
}
.fx { z-index: 0; @include positionCenter; overflow: hidden; .artefacts { z-index: 2; } .layers { z-index: 1; } .bg { z-index: -1; } .layers { opacity: 0; transition: opacity 0.3s ease-out; //transition-delay: 0.3s; will-change: transform, opacity; } .bg { opacity: 0; width: 100%; height: 100%; background: url($bg) no-repeat center top transparent; background-attachment: fixed; background-size: cover; transition: all 1s ease-out; // animation ready will-change: transform, opacity; @include noflicker; //transform: scale(1.3, 1.3); transform-origin: 50% 50%; animation: fx-zoom-in 25s linear infinite; animation-delay: 1.6s; } &--isLoaded { .layers { opacity: 1; } .bg { opacity: 1; } }
}
.artefacts { position: absolute; bottom: 0; right: 0; display: inline-block; width: 40%; img { opacity: 0; position: absolute; bottom: 0; right: 0; display: block; height: auto; max-width: 100%; // animation ready will-change: transform, opacity; @include noflicker; &.active { //animation: fx-move1 15s #{$ease} infinite; animation: fx-move2 30s linear; } }
}
// extra dust layers
.dust { position: absolute; top: -8500px; left: -8000px; width: 100000px; height: 100000px; // animation ready will-change: transform; @include noflicker; animation-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); animation-name: fx-float; animation-iteration-count: infinite;
}
#dust-1 { opacity: 0.25; background: url(nth($dust, 1)); background-repeat: repeat; animation-duration: 600s;
}
#dust-2 { opacity: 0.2; background: url(nth($dust, 2)); background-repeat: repeat; animation-duration: 450s;
}
#dust-3 { opacity: 0.15; background: url(nth($dust, 3)); background-repeat: repeat; animation-duration: 350s;
}
//
// FX keyframes
//
@keyframes fx-zoom-in {	0% { transform: scale(1, 1); }	50% {	transform: scale(1.35, 1.35);	}	100% { transform: scale(1, 1); }
}
@keyframes fx-zoom-out {	0% { transform: scale(1, 1); }	50% {	transform: scale(0.9, 0.9);	}	100% { transform: scale(1, 1); }
}
@keyframes fx-zoom-out2 {	0% { transform: scale(1.3, 1.3); }	50% {	transform: scale(1, 1);	}	100% { transform: scale(1.3, 1.3); }
}
@keyframes fx-move1 {	0% { opacity: 0; transform: translate3d(150%, 0, 0); } 10% { opacity: 1; transform: translate3d(0%, 0, 0); } 90% { opacity: 1; } 100% { opacity: 0; transform: translate3d(-150%, 0, 0); }
}
@keyframes fx-move2 {	0% { opacity: 0; transform: translate3d(0%, 0, 0); } 5% { opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translate3d(-50%, 0, 0); }
}
@keyframes fx-move3 {	0% { opacity: 0; transform: translate3d(0%, 0, 0); } 5% { opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translate3d(-100%, 0, 0); }
}
@keyframes fx-float { 0% { transform: translate(0px, 0px); } 100% { transform: translate(8000px, 4000px); }
}

Parallax landing test - Script Codes JS Codes

// #motd messages
var MESSAGES = [ 'An easier \nway to <span>tailgate</span> ^4000', 'And <span>enjoy</span> time \nwith friends and family', 'And have a \nhome team <span>experience</span>'
];
var BROWSER_STATUS = { ANIMATION_END: 'webkitAnimationEnd oanimationend msAnimationEnd animationend', TRANSITION_END: 'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend'
};
//
// DOM load
//
$(function(){ var shuffler = null; var parallax = null; // cache selectors var $motd = $('#motd'); var $fx = $('.fx'); var $artefacts = $fx.find('.artefacts'); var $dust = $fx.find('.layers'); // init dust paralax & artefacts shuffler setTimeout(function() { parallax = new Parallax($dust[0]); shuffler = new Shuffler($artefacts); $fx.addClass('fx--isLoaded'); }, 500); // init motd setTimeout(function() { $motd.typed({ strings: MESSAGES, contentType: 'html', loop: true, showCursor: false, backDelay: 2500, typeSpeed: -20, backSpeed: -50 }); }, 1500); // #debug $('#test').on('click', function() { shuffler.shuffle(); });
});
//
// Shuffler
//
var Shuffler = function($element, options) { if (!$element) { throw new Error('Need $element bro!'); } var service = {}; // INIT var _init = function() { // get artefacts list var $imgs = $element.find('img'); if (!$imgs.length) { throw new Error('No imgs to shuffle bro!'); } // all ok, go ahead // console.log('Shuffler new @ ', $element, $imgs.length) // cache selectors service.$el = $element; service.$imgs = $imgs; // attach auto shuffle handler service.$imgs.on(BROWSER_STATUS.ANIMATION_END, service.shuffle); // go shufflin' ! service.shuffle(); }; // // shuffle helper // service.shuffle = function() { // console.log('Shufflin bro!'); // get active artefact var active = service.$el.find('.active'); var activeIndex = active.index(); if (activeIndex !== -1) { nextIndex = ((activeIndex + 1) < service.$imgs.length) ? (activeIndex + 1) : 0; } else { nextIndex = 0; } // remove old active $(active).removeClass('active'); // activate next artefact $(service.$imgs[nextIndex]).addClass('active'); }; // ...and do it _init(); return service;
};
//
//	DEPS
//
// Typed.js
!function(t){"use strict";var s=function(s,e){this.el=t(s),this.options=t.extend({},t.fn.typed.defaults,e),this.isInput=this.el.is("input"),this.attr=this.options.attr,this.showCursor=this.isInput?!1:this.options.showCursor,this.elContent=this.attr?this.el.attr(this.attr):this.el.text(),this.contentType=this.options.contentType,this.typeSpeed=this.options.typeSpeed,this.startDelay=this.options.startDelay,this.backSpeed=this.options.backSpeed,this.backDelay=this.options.backDelay,this.stringsElement=this.options.stringsElement,this.strings=this.options.strings,this.strPos=0,this.arrayPos=0,this.stopNum=0,this.loop=this.options.loop,this.loopCount=this.options.loopCount,this.curLoop=0,this.stop=!1,this.cursorChar=this.options.cursorChar,this.shuffle=this.options.shuffle,this.sequence=[],this.build()};s.prototype={constructor:s,init:function(){var t=this;t.timeout=setTimeout(function(){for(var s=0;s<t.strings.length;++s)t.sequence[s]=s;t.shuffle&&(t.sequence=t.shuffleArray(t.sequence)),t.typewrite(t.strings[t.sequence[t.arrayPos]],t.strPos)},t.startDelay)},build:function(){var s=this;if(this.showCursor===!0&&(this.cursor=t('<span class="typed-cursor">'+this.cursorChar+"</span>"),this.el.after(this.cursor)),this.stringsElement){s.strings=[],this.stringsElement.hide();var e=this.stringsElement.find("p");t.each(e,function(e,i){s.strings.push(t(i).html())})}this.init()},typewrite:function(t,s){if(this.stop!==!0){var e=Math.round(70*Math.random())+this.typeSpeed,i=this;i.timeout=setTimeout(function(){var e=0,r=t.substr(s);if("^"===r.charAt(0)){var o=1;/^\^\d+/.test(r)&&(r=/\d+/.exec(r)[0],o+=r.length,e=parseInt(r)),t=t.substring(0,s)+t.substring(s+o)}if("html"===i.contentType){var n=t.substr(s).charAt(0);if("<"===n||"&"===n){var a="",h="";for(h="<"===n?">":";";t.substr(s).charAt(0)!==h;)a+=t.substr(s).charAt(0),s++;s++,a+=h}}i.timeout=setTimeout(function(){if(s===t.length){if(i.options.onStringTyped(i.arrayPos),i.arrayPos===i.strings.length-1&&(i.options.callback(),i.curLoop++,i.loop===!1||i.curLoop===i.loopCount))return;i.timeout=setTimeout(function(){i.backspace(t,s)},i.backDelay)}else{0===s&&i.options.preStringTyped(i.arrayPos);var e=t.substr(0,s+1);i.attr?i.el.attr(i.attr,e):i.isInput?i.el.val(e):"html"===i.contentType?i.el.html(e):i.el.text(e),s++,i.typewrite(t,s)}},e)},e)}},backspace:function(t,s){if(this.stop!==!0){var e=Math.round(70*Math.random())+this.backSpeed,i=this;i.timeout=setTimeout(function(){if("html"===i.contentType&&">"===t.substr(s).charAt(0)){for(var e="";"<"!==t.substr(s).charAt(0);)e-=t.substr(s).charAt(0),s--;s--,e+="<"}var r=t.substr(0,s);i.attr?i.el.attr(i.attr,r):i.isInput?i.el.val(r):"html"===i.contentType?i.el.html(r):i.el.text(r),s>i.stopNum?(s--,i.backspace(t,s)):s<=i.stopNum&&(i.arrayPos++,i.arrayPos===i.strings.length?(i.arrayPos=0,i.shuffle&&(i.sequence=i.shuffleArray(i.sequence)),i.init()):i.typewrite(i.strings[i.sequence[i.arrayPos]],s))},e)}},shuffleArray:function(t){var s,e,i=t.length;if(i)for(;--i;)e=Math.floor(Math.random()*(i+1)),s=t[e],t[e]=t[i],t[i]=s;return t},reset:function(){var t=this;clearInterval(t.timeout);var s=this.el.attr("id");this.el.after('<span id="'+s+'"/>'),this.el.remove(),"undefined"!=typeof this.cursor&&this.cursor.remove(),t.options.resetCallback()}},t.fn.typed=function(e){return this.each(function(){var i=t(this),r=i.data("typed"),o="object"==typeof e&&e;r||i.data("typed",r=new s(this,o)),"string"==typeof e&&r[e]()})},t.fn.typed.defaults={strings:["These are the default values...","You know what you should do?","Use your own!","Have a great day!"],stringsElement:null,typeSpeed:0,startDelay:0,backSpeed:0,shuffle:!1,backDelay:500,loop:!1,loopCount:!1,showCursor:!0,cursorChar:"|",attr:null,contentType:"html",callback:function(){},preStringTyped:function(){},onStringTyped:function(){},resetCallback:function(){}}}(window.jQuery);
Parallax landing test - Script Codes
Parallax landing test - Script Codes
Home Page Home
Developer Sabin Tudor
Username NyX
Uploaded January 03, 2023
Rating 3.5
Size 9,529 Kb
Views 8,096
Do you need developer help for Parallax landing test?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Sabin Tudor (NyX) Script Codes
Name
SVG low-poly background anim
Meet Squiggly - a SVG goo guy
Hypnoring thing 2.5D
Strings
Canvas Image Glitch Effect - Vaderman
BBQ
Infiniti circlez
Bits particle
Infinity Wall
Animated skewed panes
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!