Another option for presenting Bios (or other content)

Click on any of the images below to see the effect. You can also resize the browser window and see the responsive javascript for the breakpoint of 768px device width.

Slide from right | Slide from left

Bio Name1

Bio Name2

Bio Name3

HTML Code 1 - paste where you want the names and images to be located.

You'll need a head shot of each person cropped as a square.


<div class="bioBox" id="bioBox1">
<h1>Bio Name1</h1>
<div class="bioPic" id="bioPic1"><img src="project3/images/bio1.png" alt="Name of person"/></div>
</div>
<div class="bioBox" id="bioBox2">
<h1>Bio Name2</h1>
<div class="bioPic" id="bioPic2"><img src="project3/images/bio2.png" alt="Name of person"/></div>
</div>
<div class="bioBox" id="bioBox3">
<h1>Bio Name3</h1>
<div class="bioPic" id="bioPic3"><img src="project3/images/bio3.png" alt="Name of person"/></div>
</div>

HTML Code 2 - paste just above </body> at bottom of html code.

You'll need .mp3s of your interviews.


<div id="coverAll"></div>
<div id="bioCloseX"></div>
<div class="bioInfo" id="bioInfo1">
<div class="bioInfoContent" id="bioInfoContent1">
<div class="bioInfoTitle">About Person 1
<audio controls class="bioInterview">
<source src="project3/media/bio1interview.mp3" type="audio/mp3" />
</audio>
</div>
<div class="bioText">Change this with the text you want to include about the person 1. </div></div>
</div>
<div class="bioInfo" id="bioInfo2">
<div class="bioInfoContent" id="bioInfoContent2">
<div class="bioInfoTitle">About Person 2
<audio controls class="bioInterview">
<source src="project3/media/bio2interview.mp3" type="audio/mp3" />
</audio>
</div>
<div class="bioText">Change this with the text you want to include about the person 2.</div></div>
</div>
<div class="bioInfo" id="bioInfo3">
<div class="bioInfoContent" id="bioInfoContent3">
<div class="bioInfoTitle">About Person 3
<audio controls class="bioInterview">
<source src="project3/media/bio3interview.mp3" type="audio/mp3" />
</audio>
</div>
<div class="bioText">Change this with the text you want to include about the person 3.</div></div>
</div>

CSS - modify as needed.

You'll need a close X png and some background images with transparent bottom edges like these ones - put the .png and .svg file in your project3/images folder. Create your own bio#bg.png (800x533 pixels, bottom edge fades to transparent) and replace the bio#bg.png files in our project3/images folder.


.bioBox {
width: calc(33% - 10px);
height: 350px;
position: relative;
margin: 5px;
padding: 5px;
float: left;
border: 1px solid #000;
cursor: pointer;
background-color: rgba(156,241,255,1.00);
}
.bioBox h1 {
text-align: center;
}
.bioPic {
width: 80%;
height: auto;
margin: 0 auto;
padding: 0;
overflow: hidden;
position: relative;
}
.bioPic img {
width: 100%;
height: auto;
position: relative;
top: 0;
left: 0;
border-radius: 300px;
opacity: 1;
-webkit-transition: all 0.25s linear 0s;
-o-transition: all 0.25s linear 0s;
transition: all 0.25s linear 0s;
}
.bioPic img:hover {
-webkit-opacity: 0.5;
opacity: 0.5;
}
#bioCloseX {
position: fixed;
top: 20px;
right: -50vw;
width: 60px;
height: 30px;
margin: 0;
padding: 0;
background-image: url(../images/closeX.svg);
background-repeat: no-repeat;
z-index: 100009;
cursor: pointer;
}
.bioInfo {
position: fixed;
top: 0;
right: -50vw;
height: 100vh;
width: 50vw;
padding: 0;
margin: 0;
background-repeat: no-repeat;
background-size: contain;
z-index: 100001;
background-color: rgba(0,0,0,1.00);
}
.bioInfoContent {
width: 100%;
min-height: 100vh;
height: auto;
position: relative;
}
.bioInfoTitle {
font-size: 2em;
text-align: center;
position: relative;
width: 100%;
height: 100px;
margin-top: 50vh;
color: rgba(255,255,255,1.00);
}
.bioText {
width: 100%;
height: calc(50vh - 100px);
padding: 10px 50px 80px;
overflow-y: auto;
color: rgba(230,230,230,1.00);
position: relative;
}
.bioInterview {
width: 50%;
margin: 20px 25% 0;
display: block;
position: relative;
z-index: 100003;
}
#bioInfo1 {
background-image: url(../images/bio1bg.png);
}
#bioInfo2 {
background-image: url(../images/bio2bg.png);
}
#bioInfo3 {
background-image: url(../images/bio3bg.png);
}
#coverAll {
width: 0vw;
height: 100vh;
position: fixed;
top: 0;
right: 0;
background-color: rgba(252,255,55,0.51);
z-index: 100000;
cursor:pointer;
}

Javascript

You'll need these in the head of your HTML - check that you don't already have them because most likely you have these lines already


<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="https://www.freestyleacademy.rocks/jquery/transit.js"></script>

Paste this code below inside your $(document).ready(function() { }); code.


//Variables you can change
var slideDirection = "fromRight";//default is slide from right, other option is "fromLeft"
var slideTime = 500;//default slide time, change as desired
var slideEasing = "easeOutExpo";//default easing, change as desired
/*----------------Don't change anything below----------------*/
var bioClicked, slideDistance, bioInfoSelected, slideOperator, plusEqual = "+=", minusEqual = "-=";
var windowW = $(window).width();
$(".bioBox").click(function(){//actions for clicking on any of the class="bioBox" divs
bioClicked = $(this).attr("id").substr(6,7);//extracts the number from the id="bioBox3"
bioInfoSelected = "#bioInfo"+bioClicked;//creates a string of text with extracted number i.e. "#bioInfo1"
$("#coverAll").css({
"width":"100vw"//this covers all content with transparent id="coverall" div
});
if(slideDirection === "fromRight"){
slideOperator = minusEqual;
} else {//if slideDirection is NOT "fromRight"
slideOperator = plusEqual;
$(".bioInfo").css({
"left":"-50vw"
});
$("#bioCloseX").css({
"left":"-50vw"
});
}
slideDistance = $(".bioInfo").width();
if (windowW >=768){//device breakpoint of 768px
slideDistance = slideOperator + slideDistance;
} else {
slideDistance = slideOperator + windowW;
if(slideDirection === "fromRight"){
$(".bioInfo").css({
"width":"100vw",
"right":"-100vw"
});
$("#bioCloseX").css({
"right":"-100vw"
});
} else {
$(".bioInfo").css({
"width":"100vw",
"left":"-100vw"
});
$("#bioCloseX").css({
"left":"-100vw"
});
}
}
$(bioInfoSelected).transition({
x:slideDistance//moves the target bio info box into viewing position
}, slideTime, slideEasing);
$("#centeringDiv").transition({
x:slideDistance//moves the
}, slideTime, slideEasing);
$("#bioCloseX").transition({
x:slideDistance
}, slideTime, slideEasing);
});
$("#bioCloseX, #coverAll").click(function(){
$(".bioInterview").trigger('pause');
$("#coverAll").css({
"width":"0vw"
});
if(slideDirection === "fromRight"){
slideOperator = plusEqual;
} else {//if slideDirection is NOT "fromRight"
slideOperator = minusEqual;
}
slideDistance = $(".bioInfo").width();//resets this number
if (windowW >=768){
slideDistance = slideOperator + slideDistance;
} else {
slideDistance = slideOperator + windowW;
}
$(bioInfoSelected).transition({
x:slideDistance
}, slideTime, slideEasing);
$("#centeringDiv").transition({
x:slideDistance
}, slideTime, slideEasing);
$("#bioCloseX").transition({
x:slideDistance
}, slideTime, slideEasing);
});
$(window).resize(function(){
windowW = $(window).width();//reacquires window width if resized
});

 

About Person 1
Change this with the text you want to include about the person 1. Change this with the text you want to include about the person 1. Change this with the text you want to include about the person 1. Change this with the text you want to include about the person 1. Change this with the text you want to include about the person 1. Change this with the text you want to include about the person 1. Change this with the text you want to include about the person 1. Change this with the text you want to include about the person 1. Change this with the text you want to include about the person 1. Change this with the text you want to include about the person 1. Change this with the text you want to include about the person 1. Change this with the text you want to include about the person 1. Change this with the text you want to include about the person 1. Change this with the text you want to include about the person 1. Change this with the text you want to include about the person 1. Change this with the text you want to include about the person 1. Change this with the text you want to include about the person 1. Change this with the text you want to include about the person 1. Change this with the text you want to include about the person 1. Change this with the text you want to include about the person 1. Change this with the text you want to include about the person 1. Change this with the text you want to include about the person 1. Change this with the text you want to include about the person 1. Change this with the text you want to include about the person 1. Change this with the text you want to include about the person 1. Change this with the text you want to include about the person 1.
About Person 2
Change this with the text you want to include about the person 2. Change this with the text you want to include about the person 2. Change this with the text you want to include about the person 2. Change this with the text you want to include about the person 2. Change this with the text you want to include about the person 2. Change this with the text you want to include about the person 2. Change this with the text you want to include about the person 2. Change this with the text you want to include about the person 2. Change this with the text you want to include about the person 2. Change this with the text you want to include about the person 2. Change this with the text you want to include about the person 2. Change this with the text you want to include about the person 2. Change this with the text you want to include about the person 2. Change this with the text you want to include about the person 2. Change this with the text you want to include about the person 2. Change this with the text you want to include about the person 2. Change this with the text you want to include about the person 2. Change this with the text you want to include about the person 2. Change this with the text you want to include about the person 2. Change this with the text you want to include about the person 2. Change this with the text you want to include about the person 2. Change this with the text you want to include about the person 2. Change this with the text you want to include about the person 2. Change this with the text you want to include about the person 2. Change this with the text you want to include about the person 2. Change this with the text you want to include about the person 2. Change this with the text you want to include about the person 2. Change this with the text you want to include about the person 2.
About Person 3
Change this with the text you want to include about the person 3. Change this with the text you want to include about the person 3. Change this with the text you want to include about the person 3. Change this with the text you want to include about the person 3. Change this with the text you want to include about the person 3. Change this with the text you want to include about the person 3. Change this with the text you want to include about the person 3. Change this with the text you want to include about the person 3. Change this with the text you want to include about the person 3. Change this with the text you want to include about the person 3. Change this with the text you want to include about the person 3. Change this with the text you want to include about the person 3. Change this with the text you want to include about the person 3. Change this with the text you want to include about the person 3. Change this with the text you want to include about the person 3. Change this with the text you want to include about the person 3. Change this with the text you want to include about the person 3. Change this with the text you want to include about the person 3. Change this with the text you want to include about the person 3. Change this with the text you want to include about the person 3. Change this with the text you want to include about the person 3. Change this with the text you want to include about the person 3. Change this with the text you want to include about the person 3. Change this with the text you want to include about the person 3. Change this with the text you want to include about the person 3. Change this with the text you want to include about the person 3. Change this with the text you want to include about the person 3. Change this with the text you want to include about the person 3. Change this with the text you want to include about the person 3. Change this with the text you want to include about the person 3. Change this with the text you want to include about the person 3.