Slide in and slide out a button on page scroll - javascript

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.container{
height: 2000px;
background:green;
padding:10px;
}
.btn{
position:fixed;
top:50%;
right:-50%;
transition:all 600ms ease-out;
}
.slideIn{
animation: 600ms ease-in 0s slideIn;
animation-fill-mode: forwards;
}
.slideOut{
animation: 600ms ease-out 0s slideOut;
animation-fill-mode: forwards;
}
#keyframes slideIn {
from{
right:-50%;
}
to{
right:0%;
}
}
#keyframes slideOut {
from{
right:0%;
}
to{
right:-50%;
}
}
</style>
</head>
<body>
<div id="container" class="container">
<div style="height: 200px;background:red;"></div>
<div style="height: 200px;background:yellow;"></div>
<div id="someEle" style="height: 200px;background:blue;"></div>
<div style="height: 200px;background:red;"></div>
<div style="height: 200px;background:yellow;"></div>
</div>
<button id="btn" class="btn">GET API ACCESS</button>
<script>
function init(){
var parent = document.getElementById("container");
window.addEventListener('scroll',function(e){
var parentScrollHeight = parent.scrollHeight;
var parentScrollTop = document.documentElement.scrollTop;
var startPoint = (parentScrollHeight/100) * 10;
var endPoint = (parentScrollHeight/100) * 70;
console.log(parentScrollTop,startPoint,endPoint)
try{
var ele = document.getElementById("btn");
if(parentScrollTop > startPoint && parentScrollTop < endPoint){
console.log("added")
ele.classList.add("slideIn");
}else{
console.log("removed");
ele.classList.remove("slideIn");
}
}catch(e){
console.log(e);
}
});
}
init();
</script>
</body>
</html>
how to slide in and slide out a button while scrolling a page. slide in is working slide out not working.


you should add animation for btn
css
.btn{
position:fixed;
top:50%;
right:-50%;
transition:all 600ms ease-out;
animation: 600ms ease-out 0s slideOut;
animation-fill-mode: forwards;
}

Related

I have a scroll function for animation that I need to call on different elements at different times

I am building a page that I want to have multiple animations fire when they come into view. Originally I was using the same scrollFunction and just repeating the whole function every time for each element I wanted animated. Trying to avoid writing the same function over and over so I adjusted it a bit so all I had to do is call the function with different arguments. I have it working but if I call it more than 4 times any animation after that fires immediately. All the ones before work just fine and only fire when in view. I have changed class names, animation names, tried it on different elements on different parts of the page, still fires immediately. Also I can not use any jquery past v1.11 because the editor I work with has not been updated and I can not use a cdn.
HTML for one of the animations that works and one that fires immediately:
// this works fine
<div class="hero-tag">
<h1 class="heroTitle">WOLF</h1>
<h3 class="heroSubTitle font-thin">Kitchen and Bath Cabinets</h3>
</div>
// spacer added for code not associated with animations
<div style="height500px;"</div>
<div id="advantage">
<div class="advantage-grid">
<h2 id="grid-header">the <span class="heavy-sm underline">wolf</span> advantage</h2>
<div class="grid-item grid-item1">
<svg class="protectionSvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 152.91 152.23">
<g class="protectionGroup"><g class="protectionGroup">
<path class="protectionCircle circle" d="M150.8,67.46c-3.7-34.2-30.3-59.9-63.5-65.1h.2c-.6-.8-1.7,0-2.3-.7H82.9c.1.1.3.1.4.2-.6-.1-1.2-.1-1.8-.2-.2.4-.4.4-.7,0H72.1c-.2.4-.4.4-.7,0a10.87,10.87,0,0,0-1.8.1c.1,0,.1-.1.2-.1h-2c-.1.1-.2.2-.3.2a2,2,0,0,1-.8.1c-.3,0-.6.1-.9.1C33.3,6,5,34.26,1.8,67.06h0a1.21,1.21,0,0,1-.3,1v17.3c.8.6-.1,1.7.7,2.3C17.9,183.86,161.9,164.36,150.8,67.46Z" />
<path class="protectionPath inner" d="M74.4,115.26c0,1.4-.2,1.9-1.7,1.2-30.5-10.5-28-42.3-28.1-68.9,0-.9.3-1.2,1.2-1.4L73,39c1.4-.4,1.4.3,1.4,1.3ZM108.2,48c-.1,26.6,2.2,58.3-28.4,68.6-1.5.6-1.3-.3-1.3-1.2,0-25,.1-50,0-75,0-1.5.4-1.7,1.8-1.3,8.8,2.4,17.7,4.7,26.6,7A1.57,1.57,0,0,1,108.2,48Zm-33.8,67.3c0,1.4-.2,1.9-1.7,1.2-30.5-10.5-28-42.3-28.1-68.9,0-.9.3-1.2,1.2-1.4L73,39c1.4-.4,1.4.3,1.4,1.3ZM108.2,48c-.1,26.6,2.2,58.3-28.4,68.6-1.5.6-1.3-.3-1.3-1.2,0-25,.1-50,0-75,0-1.5.4-1.7,1.8-1.3,8.8,2.4,17.7,4.7,26.6,7A1.57,1.57,0,0,1,108.2,48Zm-33.8,67.3c0,1.4-.2,1.9-1.7,1.2-30.5-10.5-28-42.3-28.1-68.9,0-.9.3-1.2,1.2-1.4L73,39c1.4-.4,1.4.3,1.4,1.3ZM108.2,48c-.1,26.6,2.2,58.3-28.4,68.6-1.5.6-1.3-.3-1.3-1.2,0-25,.1-50,0-75,0-1.5.4-1.7,1.8-1.3,8.8,2.4,17.7,4.7,26.6,7A1.57,1.57,0,0,1,108.2,48Z" ></g></g>
</svg>
<p>Our culture of continuous improvement keeps us on the leading edge to ensure satisfactory
performance. </p>
</div>
<div class="grid-item grid-item2">
<svg class="qualitySvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 152.92 152.89">
<g id="Layer_2" data-name="Layer 2">
<g class="qualityGroup">
<path class="qualityCircle circle" d="M151.42,82.8c-.7,1.8-.6,3.7-.9,5.5a75,75,0,0,1-62.2,62.2c-39.3,6-76.2-18.9-84.9-57.4A74.8,74.8,0,0,1,59.53,3.42c1.75-.4,3.52-.74,5.29-1s3.6-.2,5.3-.9h12.3c3.2.4,6.4.4,9.5,1.1a74.19,74.19,0,0,1,34.5,17.5c13,11.5,20.9,25.8,24.2,42.8.5,2.5.3,5.1.8,7.6V82.8Z" fill="none" stroke="#56868d" stroke-miterlimit="10" stroke-width="3"/>
<path class="qualityPath inner" d="M93.72,50.4H118c1.4,0,1.7.4,1.7,1.8v48.6c0,1.4-.4,1.8-1.8,1.8H69.12c-1.3,0-1.8-.3-1.7-1.6q.15-3,0-6c0-.9.2-1.3,1.1-.9.1,0,.2.1.3.1,2.6.5,2.7.5,2.7,3,0,1.1.4,1.4,1.5,1.4h41.1c1.2,0,1.5-.4,1.5-1.5v-41c0-1.1-.2-1.5-1.5-1.5H73c-1,0-1.5.2-1.5,1.4,0,2.5-.9,3.3-3.5,3.3-.6,0-.6-.3-.6-.7v-7c0-1.2.9-.9,1.5-.9h20.5A20.7,20.7,0,0,1,93.72,50.4Zm-8.8,34.1c-1-.6-1.2-1.2-.6-2.4,4.4-8.7-1.6-18.3-12.9-18.4a11.79,11.79,0,0,0-10.1,6.5,12.2,12.2,0,0,0,.4,13.1c3.5,5.5,10.8,7.3,17.1,4.3.6-.3,1.1-.7,1.9,0,2,1.7,2,1.7,3.8-.2a3.78,3.78,0,0,1,.6-.6C86.22,85.9,86,85.2,84.92,84.5Zm-5.5-5.1c-.7.3-1.4-1-2.1-1.6-2.1-1.8-1.6-1.9-3.4.1s-1.9,2.1.3,4c.5.4,1.6.9,1.3,1.5s-1.4.6-2.2.7a7.34,7.34,0,0,1-7.2-4.3A8.25,8.25,0,0,1,67.5,71a7.21,7.21,0,0,1,8.1-1.6,7.74,7.74,0,0,1,4.5,7.2c0,.8.3,2.3-.7,2.8Zm20.4,9.7A16.44,16.44,0,0,1,90.5,86c-.7-.5-1-1-.3-1.7.1-.1.1-.2.2-.3.7-.8,1.2-1.9,2.1-2.3s1.7.9,2.6,1.3a9.71,9.71,0,0,0,6,1.1c1.1-.1,2.1-.5,2.3-1.8a2.14,2.14,0,0,0-1.7-2.5c-2.4-.8-4.9-1.5-7.3-2.4a5.8,5.8,0,0,1-4-5.2,7.06,7.06,0,0,1,3-6.8,8.72,8.72,0,0,1,4.4-1.5,14.88,14.88,0,0,1,9.4,2.3c.8.5,1,1,.4,1.7-.1.1-.2.3-.3.4-.6.8-1,1.9-1.8,2.3s-1.7-.7-2.6-1.1a8.81,8.81,0,0,0-4.5-.8c-1.2.1-2.2.5-2.4,1.9a2,2,0,0,0,1.66,2.29h0c1.3.4,2.5.8,3.8,1.2,1.1.4,2.2.7,3.3,1.1a6.2,6.2,0,0,1,4.2,6.5,6.68,6.68,0,0,1-4.5,6.5A13.11,13.11,0,0,1,99.82,89.1ZM59.5,89c-.7,0-1.1.1-1.6.1H30.12c-1.4,0-1.8-.3-1.8-1.7.1-2.7,0-2.7,2.7-2.7h23.6a2.42,2.42,0,0,1,2.5,1.4C57.82,87,58.62,87.9,59.5,89ZM45.62,74.2h7.6c.9,0,1.2.2,1.2,1.2,0,3.3,0,3.3-3.3,3.3H38c-1.3,0-1.7-.3-1.7-1.6.1-2.9,0-2.9,2.9-2.9Zm13.8-10.3c-.9,1.3-1.8,2.5-2.6,3.7-.3.5-.8.5-1.3.5H45c-.9,0-1.2-.3-1.2-1.2-.1-3.2-.1-3.2,3.1-3.2H59C59,63.8,59.12,63.8,59.42,63.9Z"/></g></g>
</svg>
<p>Vast inventories and smart logistics solutions combine to get you the products you need when you need
them. Plus, select products from Wolf are available with Quick Ship for delivery in days, not weeks.
</p>
</div>
<div class="grid-item grid-item3">
<svg class="ribbonSvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 152 152.26">
<g class="layer2" data-name="Layer 2">
<g class="ribbonGroup">
<path class="ribbonCircle circle" d="M150.46,74.23c0-28.2-18.27-55-44-66.33C55.72-14.35-1.18,24.28,1.6,79.79c1.29,45.38,47.57,80.14,91.56,68.82C126.82,141.06,151.65,108.69,150.46,74.23Z" />
<path class="ribbonPath inner" d="M92.36,87.24v27.31c-.39,1.88-2.28-.3-3.07-.8l-11.62-8.94a2.47,2.47,0,0,0-3.38,0l-12.81,9.84c-.4.29-.79.79-1.39.49s-.4-.89-.4-1.49V86.44a28.53,28.53,0,0,0,32.58.1A2.92,2.92,0,0,1,92.36,87.24ZM76,44.74C51.45,45.43,51.45,81.38,76,82,100.61,81.48,100.51,45.43,76,44.74ZM64.46,69.16c-.5,0-.4-.29-.4-.59V58.24c0-.3,0-.5.5-.5s.4.3.4.6V68.67C65,68.87,65,69.16,64.46,69.16ZM74,68.67a5.9,5.9,0,0,1-6.65-.9c-.2-.19-.4-.29-.1-.59s.4-.4.69-.1a5.4,5.4,0,0,0,4.87,1.29,2.09,2.09,0,0,0,.8-3.87c-1.39-.8-3.08-.7-4.47-1.39a2.72,2.72,0,0,1-.3-4.77c1.59-1.19,4.47-.89,6.16.5.29.2,0,.3-.1.49s-.3.4-.6.1a4.39,4.39,0,0,0-4.87-.59,2,2,0,0,0,.1,3.47c1.39.7,3,.7,4.37,1.39C76,64.7,75.68,67.58,74,68.67Zm8.74.69c-7.55,0-7.64-11.71,0-11.81S90.28,69.26,82.73,69.36Zm2.78-10.22a4.47,4.47,0,0,0-5-.3c-5.37,2.78-1.69,11.12,3.37,9.53C88.09,67.48,88.89,61.42,85.51,59.14ZM76,36.79c-35.16.9-35.06,52.43.1,53.23C111,89,111,37.79,76,36.79Zm.3,47.07c-27-.3-27.61-39.72-.6-40.81C102.79,43.45,103,82.77,76.28,83.86Zm16.08,3.38v27.31c-.39,1.88-2.28-.3-3.07-.8l-11.62-8.94a2.47,2.47,0,0,0-3.38,0l-12.81,9.84c-.4.29-.79.79-1.39.49s-.4-.89-.4-1.49V86.44a28.53,28.53,0,0,0,32.58.1A2.92,2.92,0,0,1,92.36,87.24ZM76,44.74C51.45,45.43,51.45,81.38,76,82,100.61,81.48,100.51,45.43,76,44.74ZM64.46,69.16c-.5,0-.4-.29-.4-.59V58.24c0-.3,0-.5.5-.5s.4.3.4.6V68.67C65,68.87,65,69.16,64.46,69.16ZM74,68.67a5.9,5.9,0,0,1-6.65-.9c-.2-.19-.4-.29-.1-.59s.4-.4.69-.1a5.4,5.4,0,0,0,4.87,1.29,2.09,2.09,0,0,0,.8-3.87c-1.39-.8-3.08-.7-4.47-1.39a2.72,2.72,0,0,1-.3-4.77c1.59-1.19,4.47-.89,6.16.5.29.2,0,.3-.1.49s-.3.4-.6.1a4.39,4.39,0,0,0-4.87-.59,2,2,0,0,0,.1,3.47c1.39.7,3,.7,4.37,1.39C76,64.7,75.68,67.58,74,68.67Zm8.74.69c-7.55,0-7.64-11.71,0-11.81S90.28,69.26,82.73,69.36Zm2.78-10.22a4.47,4.47,0,0,0-5-.3c-5.37,2.78-1.69,11.12,3.37,9.53C88.09,67.48,88.89,61.42,85.51,59.14ZM76,36.79c-35.16.9-35.06,52.43.1,53.23C111,89,111,37.79,76,36.79Zm.3,47.07c-27-.3-27.61-39.72-.6-40.81C102.79,43.45,103,82.77,76.28,83.86ZM76,44.74C51.45,45.43,51.45,81.38,76,82,100.61,81.48,100.51,45.43,76,44.74ZM64.46,69.16c-.5,0-.4-.29-.4-.59V58.24c0-.3,0-.5.5-.5s.4.3.4.6V68.67C65,68.87,65,69.16,64.46,69.16ZM74,68.67a5.9,5.9,0,0,1-6.65-.9c-.2-.19-.4-.29-.1-.59s.4-.4.69-.1a5.4,5.4,0,0,0,4.87,1.29,2.09,2.09,0,0,0,.8-3.87c-1.39-.8-3.08-.7-4.47-1.39a2.72,2.72,0,0,1-.3-4.77c1.59-1.19,4.47-.89,6.16.5.29.2,0,.3-.1.49s-.3.4-.6.1a4.39,4.39,0,0,0-4.87-.59,2,2,0,0,0,.1,3.47c1.39.7,3,.7,4.37,1.39C76,64.7,75.68,67.58,74,68.67Zm8.74.69c-7.55,0-7.64-11.71,0-11.81S90.28,69.26,82.73,69.36Zm2.78-10.22a4.47,4.47,0,0,0-5-.3c-5.37,2.78-1.69,11.12,3.37,9.53C88.09,67.48,88.89,61.42,85.51,59.14ZM76,36.79c-35.16.9-35.06,52.43.1,53.23C111,89,111,37.79,76,36.79Zm.3,47.07c-27-.3-27.61-39.72-.6-40.81C102.79,43.45,103,82.77,76.28,83.86Zm16.08,30.29c.1.79-.39,1.69-1.29,1.09-4.47-3.38-8.93-6.85-13.4-10.23a2.47,2.47,0,0,0-3.38,0l-12.81,9.83c-.4.3-.79.8-1.39.5s-.4-.89-.4-1.49V86.64a28.57,28.57,0,0,0,32.58.1C92.56,95.78,92.27,105,92.36,114.15ZM76,44.74C51.45,45.43,51.45,81.38,76,82,100.61,81.48,100.51,45.43,76,44.74ZM64.46,69.16c-.5,0-.4-.29-.4-.59V58.24c0-.3,0-.5.5-.5s.4.3.4.6V68.67C65,68.87,65,69.16,64.46,69.16ZM74,68.67a5.9,5.9,0,0,1-6.65-.9c-.2-.19-.4-.29-.1-.59s.4-.4.69-.1a5.4,5.4,0,0,0,4.87,1.29,2.09,2.09,0,0,0,.8-3.87c-1.39-.8-3.08-.7-4.47-1.39a2.72,2.72,0,0,1-.3-4.77c1.59-1.19,4.47-.89,6.16.5.29.2,0,.3-.1.49s-.3.4-.6.1a4.39,4.39,0,0,0-4.87-.59,2,2,0,0,0,.1,3.47c1.39.7,3,.7,4.37,1.39C76,64.7,75.68,67.58,74,68.67Zm8.74.69c-7.55,0-7.64-11.71,0-11.81S90.28,69.26,82.73,69.36Zm2.78-10.22a4.47,4.47,0,0,0-5-.3c-5.37,2.78-1.69,11.12,3.37,9.53C88.09,67.48,88.89,61.42,85.51,59.14Zm-21.05,10c-.5,0-.4-.29-.4-.59V58.24c0-.3,0-.5.5-.5s.4.3.4.6V68.67C65,68.87,65,69.16,64.46,69.16ZM74,68.67a5.9,5.9,0,0,1-6.65-.9c-.2-.19-.4-.29-.1-.59s.4-.4.69-.1a5.4,5.4,0,0,0,4.87,1.29,2.09,2.09,0,0,0,.8-3.87c-1.39-.8-3.08-.7-4.47-1.39a2.72,2.72,0,0,1-.3-4.77c1.59-1.19,4.47-.89,6.16.5.29.2,0,.3-.1.49s-.3.4-.6.1a4.39,4.39,0,0,0-4.87-.59,2,2,0,0,0,.1,3.47c1.39.7,3,.7,4.37,1.39C76,64.7,75.68,67.58,74,68.67Zm8.74.69c-7.55,0-7.64-11.71,0-11.81S90.28,69.26,82.73,69.36Zm2.78-10.22a4.47,4.47,0,0,0-5-.3c-5.37,2.78-1.69,11.12,3.37,9.53C88.09,67.48,88.89,61.42,85.51,59.14Z"/></g></g></svg>
<p>We offer premium products without the premium price. Our high-quality products are engineered to
provide unmatched value and are backed by industry-leading warranties.</p>
<!-- </div> -->
</div>
</div>
</div>
// spacer added for code not associated with animations
<div style="height500px;"</div>
<div class='styles'>
<span class="sub"><p class="stylesItem"> Classic</p></span>
<span class="sub"><p class="stylesItem"> Signature</p></span>
<span class="sub"><p class="stylesItem"> Endeavor</p></span>
<span class="sub"><p class="stylesItem"> Designer</p></span>
<span class="sub"><p class="stylesItem"> Builders-Mix</p></span>
<h1 class="title">WOLF kitchen cabinets</h1>
</div>
// spacer added for code not associated with animations
<div style="height500px;"</div>
// This is much further down the page but fires as soon as I start scrolling
<div class="bath-divider">
<h1 class="callBath">WOLF</h1>
<h3 class="font-thin callBathSub">Bathroom Vanity Tops</h3>
</div>
// spacer added for code not associated with animations
<div style="height500px;"</div>
//This works fine
<div class='styles'>
<span class="sub"><p class="stylesItem"> Solid Surface</p></span>
<span class="sub"><p class="stylesItem"> Quartz</p></span>
<span class="sub"><p class="stylesItem"> Natural Granite</p></span>
<span class="sub"><p class="stylesItem"> Cultured Marble</p></span>
<h1 class="title">WOLF bathroom vanity tops</h1>
</div>
Animations and CSS:
// This works Fine
.protectionSvg{
width:150px;
height:150px;
}
.protectionPath{
max-width:150px;
fill:#56868D;
stroke-width:1px;
}
.protectionSvg{
fill:transparent;
}
.protectionPath{
stroke:#56868D;
fill:none;
stroke-width:3px;
stroke-dasharray:650;
stroke-dashoffset:650;
}
.protectionCircle{
stroke:#56868D;
fill:none;
stroke-width:3px;
stroke-dasharray:650;
stroke-dashoffset:650;
}
.qualitySvg{
width:150px;
width:150px;
}
.qualityCircle{
fill:none;
stroke:#56868D;
stroke-width:3px;
stroke-dasharray:650;
stroke-dashoffset:650;
}
.qualityPath{
fill:none;
stroke:#56868D;
stroke-width:1px;
stroke-dasharray:650;
stroke-dashoffset:650;
}
.ribbonSvg{
width:150px;
height:150px;
}
.ribbonPath{
fill:none;
stroke:#56868D;
stroke-width:1;
stroke-dasharray:650;
stroke-dashoffset:650;
}
.ribbonCircle{
fill:none;
stroke:#56868D;
stroke-width:3px;
stroke-dasharray:650;
stroke-dashoffset:650;
}
.ribbonGroup{
stroke-dasharray:650;
stroke-dashoffset:0;
}
.innerAnim{
animation: inner-anim 2s 1.5s linear forwards;
-webkit-animation: inner-anim 2s 1.5s linear forwards;
}
.circleAnim{
stroke-dasharray:650;
stroke-dashoffset:650;
animation: circle-anim 2s linear forwards;
-webkit-animation: circle-anim 2s linear forwards;
}
#keyframes circle-anim{
0%{
stroke-dashoffset:650;
}
100%{
stroke-dashoffset:0;
}
}
#-webkit-keyframes circle-anim{
0%{
stroke-dashoffset:650;
}
100%{
stroke-dashoffset:0;
}
}
#keyframes inner-anim{
0%{
stroke-dashoffset:650;
fill:transparent;
}
100%{
stroke-dashoffset:0;
fill:#FFE09C;
}
}
#-webkit-keyframes inner-anim{
0%{
stroke-dashoffset:650;
fill:transparent;
}
100%{
stroke-dashoffset:0;
fill:#FFE09C;
}
}
.heroTitle{
display:inline-block;
position: relative;
transform:scale(0);
animation: hero 1s linear forwards;
-webkit-animation: hero 1s linear forwards;
}
.heroTitle::after{
content: "";
position: absolute;
top:50%;
right:-25%;
height:2px;
width:0;
background-color:#ececec;
animation: sidelines .5s 1.5s linear forwards;
-webkit-animation: sidelines .5s 1.5s linear forwards;
}
.heroTitle::before{
content: "";
position: absolute;
top:50%;
left:-25%;
height:2px;
width:0;
background-color:#ececec;
animation: sidelines .5s 1.5s linear forwards;
-webkit-animation: sidelines .5s 1.5s linear forwards;
}
.heroSubTitle{
animation: hero 1s .1s linear forwards;
-webkit-animation: hero 1s .1s linear forwards;
}
#keyframes hero {
from{
transform:scaleX(0);
}
to{
transform:scaleX(1);
}
}
#-webkit-keyframes hero {
from{
transform:scaleX(0);
}
to{
transform:scaleX(1);
}
}
#keyframes sidelines {
to{
width:25%;
}
}
#-webkit-keyframes sidelines {
to{
width:25%;
}
}
.subTitle{
position: relative;
font-size:2.2rem;
line-height:55px;
}
.subTitle::before{
content:"";
position: absolute;
top:5px;
left:-10px;
height:0;
width:2px;
background:#000;
animation: sub-title-lines 1s linear forwards;
-webkit-animation: sub-title-lines 1s linear forwards;
}
.subTitleAnim{
display:inline-block;
font-weight:200;
margin-right:35px;
transform:scaleX(0);
transform-origin:left;
animation: sub-title-anim 1s 1s linear forwards;
-webkit-animation: sub-title-anim 1s 1s linear forwards;
}
#keyframes sub-title-lines {
from{
height:0%;
}
to{
height:90%;
}
}
#-webkit-keyframes sub-title-lines {
from{
height:0%;
}
to{
height:90%;
}
}
#keyframes sub-title-anim {
to{
transform:scaleX(1);
}
}
#-webkit-keyframes sub-title-anim {
to{
transform:scaleX(1);
}
}
// This fires immediately
.bathTitleAnim{
animation: bathTitleAnim 2s forwards;
-webkit-animation: bathTitleAnim 2s forwards;
}
.bathSubAnim{
animation: bathTitleAnim 2s forwards;
-webkit-animation: bathTitleAnim 2s forwards;
}
#keyframes bathTitleAnim{
from{
transform:scale(0);
}
to{
transform:scale(1);
}
}
#-webkit-keyframes bathTitleAnim{
from{
transform:scale(0);
}
to{
transform:scale(1);
}
}
$(document).ready(function () {
let scrollFunction = function (elem, anim) {
$(window).scroll(function () {
$(elem).each(function (i) {
var bottom_of_object = $(this).position().top;
var bottom_of_window = $(window).scrollTop() + $(window).height();
if (bottom_of_window > bottom_of_object) {
return $(this).addClass(anim)
}
});
});
}
scrollFunction('.circle', 'circleAnim');
scrollFunction('.inner', 'innerAnim');
scrollFunction('.sub', 'subTitle');
scrollFunction('.stylesItem', 'subTitleAnim');
scrollFunction('.callBath', 'bathTitleAnim'); // fires immediately
scrollFunction('.callBathSub', 'bathSubAnim'); // fires immediately
});

zoom an image on button click

I have a code for an image that if you tap on it zooms out and if you tap on any where out side the box of the image it zooms back. is there I can control the zooming with a button such that one button zooms incrementally and the other zooms in decrementally. this is my attempt
<!DOCTYPE html>
<html >
<head>
<style type="text/css">
.zoomin img { height: 200px; width: 200px;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease; }
.zoomin img:hover { width: 300px; height: 300px; }
</style>
</head>
<body>
<div class="zoomin">
<img src="download.jpg" title="All you need to know about CSS Transitions " />
</div>
</body>
</html>
<button>plus</button>
<button>minus</button>
what better way could this be achieved

Simply change dimensions of image using .style.[width/height], css will do the rest:
function resize(direction) {
var delta = 100 * direction;
var element = document.getElementById('img');
var positionInfo = element.getBoundingClientRect();
element.style.width = positionInfo.width+delta+'px';
element.style.height = positionInfo.height+delta+'px';
}
<!DOCTYPE html>
<html >
<head>
<style type="text/css">
.zoomin img { height: 200px; width: 200px;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease; }
.zoomin img:hover { width: 300px; height: 300px; }
</style>
</head>
<body>
<div class="zoomin">
<img src="download.jpg" id="img" title="All you need to know about CSS Transitions " />
</div>
</body>
</html>
<button onClick="resize(1)">plus</button>
<button onClick="resize(-1)">minus</button>

This works, I've given each button a class, one plus and one minus, and have addClass and removeClass. An even easier way would be to have one button and use toggleClass to add and remove the class you already have for zoomin.
$('button.zoomPlus').click(function(){
$('.zoomin img').addClass('zoomer');
});
$('button.zoomMinus').click(function(){
$('.zoomin img').removeClass('zoomer');
});
.zoomin img { height: 200px; width: 200px;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease; }
.zoomin img:hover,
img.zoomer{ width: 300px; height: 300px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html >
<head>
</head>
<body>
<div class="zoomin">
<img src="http://placehold.it/300x300" title="All you need to know about CSS Transitions " />
</div>
</body>
</html>
<button class="zoomPlus">plus</button>
<button class="zoomMinus">minus</button>

How to set 0% css of keyframes as current css value for the element?

I am trying to make a progress indicator div using CSS animations. Please refer to the linked JSBin. The behavior I am trying to achieve is, when the user clicks on stage3 after stage1, the div width should increase from current 30% to 100% and not start from 0% as it is doing right now. I know if i set the 0% value as width: 30%, I can get that. But it won't work so well if I have many stages. I want the animation to start from final width of last stage to the width specified in new stage.
Progress indicator snippet
document.getElementById('stage1').addEventListener('click', function() {
document.getElementById('progress').classList.add('stage1');
}, false);
document.getElementById('stage2').addEventListener('click', function() {
document.getElementById('progress').classList.add('stage2');
}, false);
document.getElementById('stage3').addEventListener('click', function() {
document.getElementById('progress').classList.add('stage3');
}, false);
.progress-wrapper {
height: 10px;
width: 400px;
background-color: #BBDEFB;
}
#progress {
background-color: #AADE00;
height: 10px;
width: 0;
}
.stage1 {
animation-name: stage1;
animation-duration: 1s;
animation-fill-mode: forwards;
}
#keyframes stage1 {
to {
width: 30%;
}
}
.stage2 {
animation-name: stage2;
animation-duration: 1s;
animation-fill-mode: forwards;
}
#keyframes stage2 {
to {
width: 70%;
}
}
.stage3 {
animation-name: stage3;
animation-duration: 1s;
animation-fill-mode: forwards;
}
#keyframes stage3 {
to {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="progress-wrapper">
<div id="progress"></div>
</div>
<pre>
</pre>
<button id="stage1">stage1</button>
<button id="stage2">stage2</button>
<button id="stage3">stage3</button>
</body>
</html>

I'm not aware of a CSS-only solution, but you could set the width of the progress element before adding the class.
In doing so, it will transition from the previous width rather than from 0.
var progress = document.getElementById('progress');
document.getElementById('stage1').addEventListener('click', function() {
setPreviousWidth();
progress.classList.add('stage1');
}, false);
document.getElementById('stage2').addEventListener('click', function() {
setPreviousWidth();
progress.classList.add('stage2');
}, false);
document.getElementById('stage3').addEventListener('click', function() {
setPreviousWidth();
progress.classList.add('stage3');
}, false);
function setPreviousWidth () {
progress.style.width = progress.offsetWidth + 'px';
}
.progress-wrapper {
height: 10px;
width: 400px;
background-color: #BBDEFB;
}
#progress {
background-color: #AADE00;
height: 10px;
width: 0;
}
.stage1 {
animation-name: stage1;
animation-duration: 1s;
animation-fill-mode: forwards;
}
#keyframes stage1 {
to {
width: 30%;
}
}
.stage2 {
animation-name: stage2;
animation-duration: 1s;
animation-fill-mode: forwards;
}
#keyframes stage2 {
to {
width: 70%;
}
}
.stage3 {
animation-name: stage3;
animation-duration: 1s;
animation-fill-mode: forwards;
}
#keyframes stage3 {
to {
width: 100%;
}
}
<div class="progress-wrapper">
<div id="progress"></div>
</div>
<pre>
</pre>
<button id="stage1">stage1</button>
<button id="stage2">stage2</button>
<button id="stage3">stage3</button>

Buggy fade in/out code in JavaScript/CSS

I'm not the most proficient in coding and have been stuck at trying to get this function working right for days and hope that someone could help me...
The idea is for the red div to show by default and the blue/yellow divs to be called upon by pressing the 'fade 1' and 'fade 2' buttons. When either of the buttons are pressed the red div is hidden and wont be called for.
The current code bugs up when the buttons are pressed continuously, they either wont show, the fade effect wont work or the red div appears.
Thanks!
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.myBtn
{
width:80px;
}
#myImg0
{
-webkit-transition: opacity 0.5s ease-in;
-moz-transition: opacity 0.5s ease-in;
-o-transition: opacity 0.5s ease-in;
position:absolute;
background-color:red;
width: 100px;
height: 100px;
}
#myImg1
{
-webkit-transition: opacity 0.5s ease-in;
-moz-transition: opacity 0.5s ease-in;
-o-transition: opacity 0.5s ease-in;
position:absolute;
background-color:blue;
width: 100px;
height: 100px;
}
#myImg2
{
-webkit-transition: opacity 0.5s ease-in;
-moz-transition: opacity 0.5s ease-in;
-o-transition: opacity 0.5s ease-in;
position:absolute;
background-color:yellow;
width: 100px;
height: 100px;
}
#myImg1.fade-out
{
opacity:0;
}
#myImg1.fade-in
{
opacity:1;
}
#myImg2.fade-out
{
opacity:0;
}
#myImg2.fade-in
{
opacity:1;
}
.hide {display: none;}
</style>
<script type="text/javascript">
function fade1(btnElement) {
if (btnElement.value === "Fade Out") {
document.getElementById("myImg0").className = "fade-out";
document.getElementById("myImg2").className = "fade-out";
btnElement.value = "Fade In";
}
else {
document.getElementById("myImg1").className = "fade-in";
btnElement.value = "Fade Out";
}
}
function fade2(btnElement) {
if (btnElement.value === "Fade Out") {
document.getElementById("myImg0").className = "fade-out";
document.getElementById("myImg1").className = "fade-out";
btnElement.value = "Fade In";
}
else {
document.getElementById("myImg2").className = "fade-in";
btnElement.value = "Fade Out";
}
}
</script>
</head>
<body>
<input class="myBtn" type="button" value="Fade 1" onclick="fade1(myImg1);" />
<input class="myBtn" type="button" value="Fade 2" onclick="fade2(myImg2);" />
<div id="myImg0" ></div>
<div id="myImg1" class="hide" ></div>
<div id="myImg2" class="hide" ></div>
</body>
</html>

You could use jquery like this- jsFiddle
$(document).ready(function () {
$(".fade1").click(function () {
$("#myImg1").fadeToggle();
$("#myImg2").fadeOut();
});
});
$(document).ready(function () {
$(".fade2").click(function () {
$("#myImg2").fadeToggle();
$("#myImg1").fadeOut();
});
});

rotating image on refresh

I am completely new to this so bear with me. I am looking to rotate the main image on this page http://jovanatanackovic.com/index.html every time its refreshed or loaded. I found this and tried adding it in the script tags
function random_imglink(){
var theImages = new Array()
theIimages[1]="images/thalia-heffernan-4.jpg"
theImages[2]="images/volcano-surfing-the-ascent.jpg"
theImages[3]="images/rooster-fighting-sucking-blood-from-face.jpg"
theImages[4]="images/cooper-canyon-fallen-tarahumara.jpg"
theImages[5]="images/copper-canyon-finishers.jpg"
var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
if(whichImage==0){
document.write('<img src="'+theImages[whichImage]+'" border=0 width=689 height=466>');
} else if(whichImage==1){
document.write('<img src="'+theImages[whichImage]+'" border=0 width=689 height=466>');
} else if(whichImage==2){
document.write('<img src="'+theImages[whichImage]+'" border=0 width=689 height=466>');
} else if(whichImage==3){
document.write('<img src="'+theImages[whichImage]+'" border=0 width=689 height=466>');
} else if(whichImage==4){
document.write('<img src="'+theImages[whichImage]+'" border=0 width=689 height=466>');
}
}
and I was told to add this where I wanted the images to show
<script>showImage();</script>
is this correct? I'm sure sure where exactly to put it as the current image has css attached. I've tried adding it inside the div tags.

Try this;
JSfiddle
CSS
#imgTest {
background-image: url('YourImage.jpg');
width: 450px;
height: 281px;
-webkit-animation-name: rotate;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: right;
-webkit-animation-timing-function: linear;
-ms-animation-name: rotate;
-ms-animation-duration: 4s;
-ms-animation-iteration-count: 1;
-ms-animation-direction: right;
-ms-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 4s;
-moz-animation-iteration-count: 1;
-moz-animation-direction: right;
-moz-animation-timing-function: linear;
-o-animation-name: rotate;
-o-animation-duration: 4s;
-o-animation-iteration-count: 1;
-o-animation-direction: right;
-o-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 4s;
animation-iteration-count: 1;
animation-direction: right;
animation-timing-function: linear;
}
#-webkit-keyframes rotate {
0% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
}
#-ms-keyframes rotate {
0% {
-ms-transform:rotate(0deg);
transform:rotate(0deg);
}
100% {
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}
}
#-moz-keyframes rotate {
0% {
-moz-transform:rotate(0deg);
transform:rotate(0deg);
}
100% {
-moz-transform:rotate(360deg);
transform:rotate(360deg);
}
}
#-o-keyframes rotate {
0% {
-o-transform:rotate(0deg);
transform:rotate(0deg);
}
100% {
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
}
#keyframes rotate {
0% {
transform:rotate(0deg);
}
100% {
transform:rotate(360deg);
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div id="imgTest"></div>
</body>
</html>

As a tip, you could simplify the array:
var theImages = [
"images/thalia-heffernan-4.jpg",
"images/volcano-surfing-the-ascent.jpg",
"images/rooster-fighting-sucking-blood-from-face.jpg",
"images/cooper-canyon-fallen-tarahumara.jpg",
"images/copper-canyon-finishers.jpg"
]

If you really want to use that code, then you want the following:
<div class="photo">
<script>
...JAVASCRIPT HERE...
</script>
</div>
Of course, it would be a much nicer solution to use javascript like the following instead of document.write:
In the HEAD:
<script>
function showImage()
{
// Better array init thanks to Joseph Silvashy
var theImages = [
"images/thalia-heffernan-4.jpg",
"images/volcano-surfing-the-ascent.jpg",
"images/rooster-fighting-sucking-blood-from-face.jpg",
"images/cooper-canyon-fallen-tarahumara.jpg",
"images/copper-canyon-finishers.jpg"
]
var whichImage = Math.round(Math.random()*(p-1));
document.getElementById("rotatingImage").src = theImages[whichImage];
}
</script>
and
<body onload="showImage()">
...

Categories