JavaScript is disabled! Please enable JavaScript in your web browser!

Freestyle Academy of Communication Arts & Technology

1299 Bryant Ave, Mt. View, CA 94040 T 650-940-4650 x5090
2 Required Classes: English and Digital Media 3rd/Elective Class:  + Animation or Design or Film

Back to list of all examples

Useful Stuff About:

Shuffling Content Example

Click on a button to see and hear the effect.

1
2
3
4

Download the shuffling SFX here. Here's the code that makes this all work:

Scripts needed (copy and paste inside <head>)


<script type="text/javascript" src="https://www.freestyleacademy.rocks/jquery/minified.js"></script>
<script type="text/javascript" src="https://www.freestyleacademy.rocks/jquery/easing.js"></script>
<script type="text/javascript" src="https://www.freestyleacademy.rocks/jquery/easing.compatibility.js"></script>
<script type="text/javascript" src="path_to_javascript_file.js"></script><!--adjust this as needed-->

Here's the HTML code


<nav>
<div id="btn1" class="btn">1</div>
<div id="btn2" class="btn">2</div>
<div id="btn3" class="btn">3</div>
<div id="btn4" class="btn">4</div>
<div id="underLineBox">
<div id="underLine"></div>
</div>
</nav>
<div id="allArticlesWrapper">
<div id="allArticles">
<article id="article1" class="article">1</article>
<article id="article2" class="article">2</article>
<article id="article3" class="article">3</article>
<article id="article4" class="article">4</article>
</div>
</div>

Here's the CSS - obviously modify as needed


nav {
display:block;
height:50px;
width:800px;
margin:0 auto;
top:0px;
position:relative;
}
.btn {
width:200px;
height:50px;
float:left;
text-align:center;
cursor:pointer;
font-size:3em;
z-index:10;
}
.btn:hover {
color:#F00;
}
#underLineBox {
width:200px;
height:60px;
position:absolute;
top:0;
left:0;
z-index:20;
}
#underLine {
width:200px;
height:10px;
position:absolute;
bottom:0;
left:0;
z-index:21;
background-color:#F00;
}
#allArticlesWrapper {
position:relative;
width:100%;
height:600px;
z-index:2;
left: 0;
top: 15px;
overflow: hidden;
}
#allArticlesWrapper article {
position:absolute;
width:830px;
height:580px;
top: 0px;
padding:10px;
text-align: right;
}
#article1 {
background-color:#C30;
z-index:9999;
left:0px;
}
#article2 {
background-color: #99F;
z-index:9998;
left:50px;
}
#article3 {
background-color: #6C9;
z-index:9997;
left:100px;
}
#article4 {
background-color: #FF0;
z-index:9996;
left:150px;
}

Here's the javascript code


"use strict";
var btnClicked, shuffleTime, easing, audioElement;
var articleWidth, currentArticle, targetArticle, otherArticles, topZ, newZ, onTop;
var totalArticles = $("#allArticles article").length;
var a1L=$("#article1").css("left"), a2L=$("#article2").css("left");
a1L=a1L.replace("px","");
a2L=a2L.replace("px","");
var overlapWidth = a2L - a1L;
//Set initial variable values
shuffleTime = 700;//this value is set relative to length of audio SFX
onTop=1;
currentArticle = "#article1";
otherArticles = "#article2, #article3, #article4";
articleWidth = $("#allArticlesWrapper").parent().css("width").replace("px","")-overlapWidth*(totalArticles-1);
topZ=9999;
easing="easeInOutQuint";
//initial audio settings
audioElement = document.createElement('audio');//sets variable as an audio type rather than text, number, array, etc.
audioElement.setAttribute("src", "shuffleContent.mp3");//locates the audio mp3 file
audioElement.load();//auto loads the audio so it's ready to play immediately, i.e. no downloading then playing delay
//actions for when a .btn is clicked
function whenClicked(){
$(".btn").click(function(){
$(".btn").unbind("click");//makes all buttons temporarily unclickable
btnClicked=$(this).attr("ID");//gets ID of btn clicked
targetArticle = "#article"+btnClicked.substr(3,4);//sets the target article based on button clicked
shiftUnderLine();//calls on function defined below
shuffleArticles();//calls on function defined below
});
}
whenClicked();//initiates the function above to execute

//this block moves the underline to the clicked button position
function shiftUnderLine(){
var btnX = document.getElementById(btnClicked).offsetLeft;//gets the position of the button clicked
$("#underLineBox").animate({
"left":btnX
},shuffleTime/4,easing);
}
//this block actually shuffles the articles
function shuffleArticles(){
if(targetArticle!==currentArticle){//code below executes until target article is on top
audioElement.play();//plays the audio SFX defined above from the beginning
//animates current article to the left
$(currentArticle).animate({
"left":-articleWidth
},shuffleTime/2,easing,
//animates after current article is done moving left
function(){
//set the current article z-index below the other articles
newZ=topZ-totalArticles;
$(currentArticle).css({
"z-index":newZ,
});
//set the other article z-indexes up by one
$(otherArticles).css({
"z-index":"+=1"
});
var t = "-="+overlapWidth;
//animates the other articles to the left as a group
$(otherArticles).animate({
"left":t
},shuffleTime, easing);
var s = overlapWidth*(totalArticles-1);
//animates the current article to the right behind the other articles
$(currentArticle).animate({
"left":s
},shuffleTime, easing,
//after all animations are complete, these functions below are executed
function(){
resetVariables();
shuffleArticles();//repeats action
});
});
} else {//if targetArticle is equal to currentArticle
$(".btn").bind("click",whenClicked());//makes .btn clickable again
}
}
//this block sets variables needed to execute the shuffle in the right order
function resetVariables(){
switch (currentArticle) {
case "#article1":
currentArticle="#article2";
otherArticles = "#article1, #article3, #article4";
break;
case "#article2":
currentArticle="#article3";
otherArticles = "#article2, #article1, #article4";
break;
case "#article3":
currentArticle="#article4";
otherArticles = "#article3, #article1, #article2";
break;
case "#article4":
currentArticle="#article1";
otherArticles = "#article4, #article2, #article3";
break;
}
}