I have this image that gets revealed when clicked, but i would like there to be a transition animation of 1s or so.
I don't want to use jQuery. A mobile friendly css solution would be great.
Any ideas?
#cover {
height: 100px;
overflow: hidden;
border-radius: 4px 4px 0 0;
}
#image {
width: 100%;
display: block;
}
<div class="cover" id="cover">
<img src="http://lorempixel.com/500/500/cats/" onclick="myFunction()" id="image" />
</div>
<script>
var isOpen = false;
function myFunction() {
var image = document.getElementById('image');
var cover = document.getElementById('cover');
if (isOpen === false) {
cover.setAttribute("style", "height:" + image.offsetHeight + "px");
isOpen = true;
} else if (isOpen !== false) {
cover.setAttribute("style", "height:100px");
isOpen = false;
}
}
</script>
You can just add transition: height 1s to have a one second animation:
#cover {
height: 100px;
overflow: hidden;
border-radius: 4px 4px 0 0;
-webkit-transition: height 1s;
-moz-transition: height 1s;
-ms-transition: height 1s;
-o-transition: height 1s;
transition: height 1s;
}
#image {
width: 100%;
display: block;
}
<div class="cover" id="cover">
<img src="http://lorempixel.com/500/500/cats/" onclick="myFunction()" id="image" />
</div>
<script>
var isOpen = false;
function myFunction() {
var image = document.getElementById('image');
var cover = document.getElementById('cover');
if (isOpen === false) {
cover.setAttribute("style", "height:" + image.offsetHeight + "px");
isOpen = true;
} else if (isOpen !== false) {
cover.setAttribute("style", "height:100px");
isOpen = false;
}
}
</script>
Theres a hacky way to do this without any JS at all. I used the max-height attribute, this way it could be used for images that does not have a fixed height.
#cover {
min-height:100px;
max-height:100px;
overflow:hidden;
position:relative;
transition: all linear 1s;
}
#coverToggle:checked + #cover {
max-height:500px;
}
label {
position:absolute;
left:0px;
top:0px;
right:0px;
bottom:0px;
}
input {
position:absolute;
visibility:hidden;
top:-100px;
left:-100px;
}
<input type="checkbox" id="coverToggle" />
<div class="cover" id="cover">
<label for="coverToggle"></label>
<img src="http://lorempixel.com/500/500/cats/" id="image" />
</div>
Related
I am trying to do menu. When user scroll down menu disppears, when scroll up it appears again. I have problem with adding animation effect. I do not want the menu disappearing immediately, but it will take some time. I tried with animate function but it wouldn't work.
Thanks.
<body>
<nav class="site-navbar">
</nav>
</body>
body {
height:300vh;
width:100%;
background-color:yellow;
margin:0;
padding:0;
.site-navbar {
width:100%;
height:40px;
background-color:red;
position:fixed;
top:0px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease
}
.nav-up {
top:-40px;
}
}
var prevScroll = 0;
$(document).scroll(function() {
var currentPos = $(this).scrollTop();
if(currentPos > prevScroll) {
$('nav').removeClass('site-navbar').addClass('nav-up');
}
else {
$('nav').removeClass('nav-up').addClass('site-navbar');
}
prevScroll = currentPos;
})
https://jsfiddle.net/m6r8z8wp/2/
there's no need to remove class before adding a new one FIDDLE
var prevScroll = 0;
$(document).scroll(function() {
var currentPos = $(this).scrollTop();
if(currentPos > prevScroll) {
$('nav').addClass('nav-up');
} else {
$('nav').removeClass('nav-up').addClass('site-navbar');
}
prevScroll = currentPos;
});
If you remove the class you remove the transition as well
DEMO
var prevScroll = 0;
$(document).scroll(function() {
var currentPos = $(this).scrollTop();
if (currentPos > prevScroll) {
$('nav').slideUp("slow", "linear");
} else {
$('nav').slideDown("slow", "linear");
}
prevScroll = currentPos;
})
body {
height: 300vh;
width: 100%;
background-color: yellow;
margin: 0;
padding: 0;
}
.site-navbar {
width: 100%;
height: 40px;
background-color: red;
position: fixed;
top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="site-navbar">
</nav>
Alternative you can use jquery slideUp() / slideDown() for animation
I want to darken an image, but it isn't fully black in the end, because I can see the image some extent. I want to use vanilla JS only (no jQuery).
I have used a color array (colorArr), but I think there are much more elegant ways for darkening.
var element = document.getElementById("img");
var colorArr = ["#fff","#ddd","#bbb","#999","#777","#555","#333","#000",];
var counter = 0;
var j=0;
var i = setInterval(function(){
if(j < colorArr.length){
element.style.backgroundColor = colorArr[j];
j++;
}
counter++;
if(counter === 8) {
clearInterval(i);
}
}, 250);
div.darken img {
background-color: white;
}
<html>
<body>
<div class="darken">
<img id="img"
src="http://davidrhysthomas.co.uk/linked/astrid_avatar2.png" />
</div>
</body>
</html>
I'll do it using CSS and JavaScript.
window.onload = function () {
document.getElementById("mask").classList.add("on");
};
.dark-img {display: inline-block; position: relative;}
.dark-img .mask {position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 1; opacity: 0; background-color: #000; transition: opacity 2.5s linear;}
.dark-img .mask.on {opacity: 1;}
<div class="dark-img">
<div class="mask" id="mask"></div>
<img src="http://davidrhysthomas.co.uk/linked/astrid_avatar2.png" alt="" />
</div>
This technique allows me to use any colour and duration. Let's say orange for 1.5 seconds:
window.onload = function () {
document.getElementById("mask").classList.add("on");
};
.dark-img {display: inline-block; position: relative;}
.dark-img .mask {position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 1; opacity: 0; background-color: #f90; transition: opacity 1.5s linear;}
.dark-img .mask.on {opacity: 1;}
<div class="dark-img">
<div class="mask" id="mask"></div>
<img src="http://davidrhysthomas.co.uk/linked/astrid_avatar2.png" alt="" />
</div>
This is a CSS only solution!
a.darken {
display: inline-block;
background: black;
padding: 0;
}
a.darken img {
display: block;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
a.darken:hover img {
opacity: 0;
}
<a href="http://google.com" class="darken">
<img src="http://www.placehold.it/200x200" width="200">
</a>
You can use Web Animations API, Promise.all() to animate the background-color of <img> .parentElement from #fff to #000 and animate <img> element opacity to 0 in parallel.
const element = document.getElementById("img");
element.parentElement.style.width = `${element.naturalWidth}px`;
const button = document.querySelector("button");
const colorArr = ["#fff", "#ddd", "#bbb", "#999", "#777", "#555", "#333", "#000"];
const settings = {
easing: "linear",
fill: "forwards",
duration: 2500,
iterations: 1
};
button.onclick = () =>
Promise.all([element.parentElement.animate(colorArr.map(color => ({
backgroundColor: color
})), settings)
, element.animate([{opacity: 0}],
settings)]);
div.darken img {
background-color: white;
position: relative;
opacity: 1;
}
<html>
<body>
<button>click</button>
<div class="darken">
<img id="img" src="http://davidrhysthomas.co.uk/linked/astrid_avatar2.png" />
</div>
</body>
</html>
Use a pseudo element and keep the markup as is, add a CSS transition and then fire it with a hover or script, which ever suit best
window.addEventListener('load', function(){
document.querySelector('button').addEventListener('click', function (){
document.querySelector('.darken').classList.toggle('on');
})
})
div.darken img {
background-color: white;
}
div.darken {
display: inline-block;
position: relative;
}
div.darken::after {
content: '';
position: absolute;
top: 0; left: 0;
bottom: 0; right: 0;
background: black;
opacity: 0;
transition: opacity 1s;
}
div.darken:hover::after {
opacity: 1;
}
div.darken.on::after {
opacity: 1;
background: lightgray;
}
#keyframes darken {
0% { opacity: 0; }
100% { opacity: 1; }
}
<html>
<body>
<button>Click here (or hover image) to toggle darken</button><br>
<div class="darken">
<img id="img"
src="http://davidrhysthomas.co.uk/linked/astrid_avatar2.png" />
</div>
</body>
</html>
https://codepen.io/-dhaval-/pen/yMJKgE
above is the link of where i am trying this...
below is code:
function typeAp(target, toType, stepTime){
var n = 0;
var chars = Array.from(toType);
setInterval(function(){
$(target).append(chars[n]);
n++;
},stepTime);
};
typeAp('.init',"initializing",100);
body{
background-color:#ccc;
}
.container{
display:flex;
width:100%;
height:100vh;
justify-content:center;
align-items:center;
}
.cmd{
background-color:#111;
border-radius:5px;
padding:20px;
width:600px;
height:200px;
}
p{
letter-spacing:2px;
white-space: nowrap;
overflow: hidden;
font-family:courier;
color:lime;
}
::selection{
background:#111;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="cmd">
<p class="init">$Robot~ </p>
<p class="perc"> </p>
</div>
</div>
</body>
I want to add blinking "_" after each character so that it looks like the text is typed and it feels like command line.
Suggest any mistakes, or extra things i could add to this code if u like.
This is a pure jQuery solution, but it can also be done by css.
I've added a callback function to your typeAp and it insert the "_" and makes it blink.
This trigger the callback when its done writing.
if (n == chars.length) {
callback(target)
}
function typeAp(target, toType, stepTime, callback) {
var n = 0;
var chars = Array.from(toType);
setInterval(function() {
$(target).append(chars[n]);
n++;
if (n == chars.length) {
callback(target)
}
}, stepTime);
};
typeAp('.init', "initializing", 100, function(target) {
$(target).append("<span class='blink'>_</span>")
function blinker() {
$('.blink').fadeOut(500);
$('.blink').fadeIn(500);
}
setInterval(blinker, 1000);
});
body {
background-color: #ccc;
}
.container {
display: flex;
width: 100%;
height: 100vh;
justify-content: center;
align-items: center;
}
.cmd {
background-color: #111;
border-radius: 5px;
padding: 20px;
width: 600px;
height: 200px;
}
p {
letter-spacing: 2px;
white-space: nowrap;
overflow: hidden;
font-family: courier;
color: lime;
}
::selection {
background: #111;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="cmd">
<p class="init">$Robot~ </p>
<p class="perc"> </p>
</div>
</div>
</body>
You could use pseudoelement and simple animation:
.init::after {
content: '_';
display: inline-block;
animation: flash 1s linear infinite;
}
#keyframes flash {
50% {
opacity: 0;
}
}
codepen
Add the cursor to your HTML:
body
.container
.cmd
p.init
span.prompt $Robot~
span.cursor _
p.perc
Style the cursor:
.cursor {
animation: blink 1s linear infinite;
}
#keyframes blink {
50% { opacity: 0; }
}
And change the JS to target the new span:
typeAp('.prompt',"initializing",100);
Add to styles
.init::after {
content: '_';
animation: blink 0.2s linear infinite;
}
#keyframes blink {
0% {
opacity: 0;
}
100% {
opaicty: 1;
}
}
A possible solution with jQuery:
function typeAp(target, toType, stepTime){
$('.dash').hide();
var n = 0;
var chars = Array.from(toType);
var interval = setInterval(function(){
$(target).append(chars[n]);
n++;
if (n >= chars.length) {
clearInterval(interval);
$('.dash').show();
}
},stepTime);
};
setInterval(function() {
$('.dash').toggleClass('hide');
}, 700);
typeAp('.text',"initializing",100);
body{
background-color:#ccc;
}
.container{
display:flex;
width:100%;
height:100vh;
justify-content:center;
align-items:center;
}
.cmd{
background-color:#111;
border-radius:5px;
padding:20px;
width:600px;
height:200px;
}
p{
letter-spacing:2px;
white-space: nowrap;
overflow: hidden;
font-family:courier;
color:lime;
}
.dash.hide {
opacity: 0;
}
::selection{
background:#111;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="cmd">
<p>
$Robot~ <span class="text"></span><span class="dash">_</span>
</p>
</div>
</div>
</body>
Using CSS and pseudoelement :after
function typeAp(target, toType, stepTime){
target = $(target).addClass('typing');
var n = 0;
var chars = Array.from(toType);
var interval = setInterval(function(){
target.append(chars[n]);
n++;
if (n >= chars.length) {
clearInterval(interval);
target.removeClass('typing');
}
},stepTime);
};
typeAp('.init', "initializing", 100);
body{
background-color:#ccc;
}
.container{
display:flex;
width:100%;
height:100vh;
justify-content:center;
align-items:center;
}
.cmd{
background-color:#111;
border-radius:5px;
padding:20px;
width:600px;
height:200px;
}
p{
letter-spacing:2px;
white-space: nowrap;
overflow: hidden;
font-family:courier;
color:lime;
}
.init:not(.typing)::after {
content: '_';
animation: blink 1s ease .5s infinite;
opacity: 0;
}
#keyframes blink {
50% {
opacity: 1;
}
}
::selection{
background:#111;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="cmd">
<p class="init">$Robot~ </p>
<p class="perc"> </p>
</div>
</div>
</body>
I am using JavaScript to toggle notification like below.
How can I add transition between display: block and display: none;
I don't want to add an external library like jQuery because I am only going to be using the toggle effect alone.
var btn = document.querySelector('button');
btn.addEventListener('click', function(){
var hint = document.getElementById('hint');
if(hint.style.display == 'none'){
hint.style.display = 'block';
}
else{
hint.style.display = 'none';
}
});
div#hint{
background: gold;
color: orangered;
padding: .5em;
font-weight: bold;
}
<div id='hint'>
<p>This is some hint on how to be safe in this community </p>
<p>This is another hint on how to be safe in this community </p>
</div>
<button> show hint </button>
I know I can use jQuery to achieve this like below.
$(document).ready(function(){
$('button').click(function(){
$('#hint').toggle('slow');
});
});
div#hint{
background: gold;
color: orangered;
padding: .5em;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='hint'>
<p>This is some hint on how to be safe in this community </p>
<p>This is another hint on how to be safe in this community </p>
</div>
<button> show hint </button>
Can I make the button moves up and down gradually while the #hint is being toggle like in the jQuery example above? I don't want the button to jump from one position to another.
#vothaison's suggestion: CSS transitions
Technically, #vothaison wanted to use setInterval as opposed to setTimeout, but I don't see the need for that. It's just more work.
var hint = document.getElementById('hint');
var btn = document.getElementById('btn_show');
btn.addEventListener('click', function(){
var ctr = 1;
hint.className = hint.className !== 'show' ? 'show' : 'hide';
if (hint.className === 'show') {
hint.style.display = 'block';
window.setTimeout(function(){
hint.style.opacity = 1;
hint.style.transform = 'scale(1)';
},0);
}
if (hint.className === 'hide') {
hint.style.opacity = 0;
hint.style.transform = 'scale(0)';
window.setTimeout(function(){
hint.style.display = 'none';
},700); // timed to match animation-duration
}
});
#hint {
background: yellow;
color: red;
padding: 16px;
margin-bottom: 10px;
opacity: 0;
transform: scale(0);
transition: .6s ease opacity,.6s ease transform;
}
<div id="hint" style="display: none;">
<p>This is some hint on how to be safe in this community </p>
<p>This is another hint on how to be safe in this community </p>
</div>
<button id="btn_show"> Show hint </button>
Using CSS animations
var hint = document.getElementById('hint');
var btn = document.getElementById('btn_show');
btn.addEventListener('click', function(){
hint.className = hint.className !== 'show' ? 'show' : 'hide';
if (hint.className === 'show') {
setTimeout(function(){
hint.style.display = 'block';
},0); // timed to occur immediately
}
if (hint.className === 'hide') {
setTimeout(function(){
hint.style.display = 'none';
},700); // timed to match animation-duration
}
});
#-webkit-keyframes in {
0% { -webkit-transform: scale(0) rotate(12deg); opacity: 0; visibility: hidden; }
100% { -webkit-transform: scale(1) rotate(0); opacity: 1; visibility: visible; }
}
#keyframes in {
0% { transform: scale(0) rotate(12deg); opacity: 0; visibility: hidden; }
100% { transform: scale(1) rotate(0); opacity: 1; visibility: visible; }
}
#-webkit-keyframes out {
0% { -webkit-transform: scale(1) rotate(0); opacity: 1; visibility: visible; }
100% { -webkit-transform: scale(0) rotate(-12deg); opacity: 0; visibility: hidden; }
}
#keyframes out {
0% { transform: scale(1) rotate(0); opacity: 1; visibility: visible; }
100% { transform: scale(0) rotate(-12deg); opacity: 0; visibility: hidden; }
}
#hint {
background: yellow;
color: red;
padding: 16px;
margin-bottom: 10px;
}
#hint.show {
-webkit-animation: in 700ms ease both;
animation: in 700ms ease both;
}
#hint.hide {
-webkit-animation: out 700ms ease both;
animation: out 700ms ease both;
}
<div id="hint" style="display: none;">
<p>This is some hint on how to be safe in this community </p>
<p>This is another hint on how to be safe in this community </p>
</div>
<button id="btn_show"> Show hint </button>
Using vanilla JavaScript
There are many, many ways to do this sort of thing with vanilla JavaScript, so here's a quick sketch of one way:
// you may need to polyfill requestAnimationFrame
var hint = document.getElementById('hint');
var btn = document.getElementById('btn_show');
btn.addEventListener('click', function(){
var ctr = 0;
hint.className = hint.className !== 'show' ? 'show' : 'hide';
if (hint.className === 'show') {
window.setTimeout(function(){
hint.style.display = 'block';
fadein();
},0); // do this asap
}
if (hint.className === 'hide') {
fadeout();
window.setTimeout(function(){
hint.style.display = 'none';
},700); // time this to fit the animation
}
function fadein(){
hint.style.opacity = ctr !== 10 ? '0.'+ctr : 1;
hint.style.transform = ctr !== 10 ? 'scale('+('0.'+ctr)+')' : 'scale(1)';
ctr++;
if (ctr < 11)
requestAnimationFrame(fadein);
else
ctr = 0;
}
function fadeout(){
hint.style.opacity = 1 - ('0.'+ctr);
hint.style.transform = 'scale('+(1 - ('0.'+ctr))+')';
ctr++;
if (ctr < 10)
requestAnimationFrame(fadeout);
else
ctr = 0;
}
});
#hint {
background: yellow;
color: red;
padding: 16px;
margin-bottom: 10px;
opacity: 0;
}
<div id="hint" style="display: none;">
<p>This is some hint on how to be safe in this community </p>
<p>This is another hint on how to be safe in this community </p>
</div>
<button id="btn_show"> Show hint </button>
Say what you want about GreenSock, Velocity.js, jQuery, etc — they all trivialise this process of showing and hiding of things. Why not just borrow the show and hide functions from jQuery's source code?
see my example below:
var btn = document.querySelector('button');
var hint = document.getElementById('hint');
var height = hint.clientHeight;
var width = hint.clientWidth;
console.log(width + 'x' + height);
// initialize them (within hint.style)
hint.style.height = height + 'px';
hint.style.width = width + 'px';
btn.addEventListener('click', function(){
if(hint.style.visibility == 'hidden'){
hint.style.visibility = 'visible';
//hint.style.opacity = '1';
hint.style.height = height + 'px';
hint.style.width = width + 'px';
hint.style.padding = '.5em';
}
else{
hint.style.visibility = 'hidden';
//hint.style.opacity = '0';
hint.style.height = '0';
hint.style.width = '0';
hint.style.padding = '0';
}
});
div#hint{
background: gold;
color: orangered;
padding: .5em;
box-sizing: border-box;
overflow: hidden;
font-weight: bold;
transition: height 1s, width 1s, padding 1s, visibility 1s, opacity 0.5s ease-out;
}
<div id='hint'>
<p>This is some hint on how to be safe in this community </p>
<p>This is another hint on how to be safe in this community </p>
</div>
<button> show hint </button>
Hi I dont use display: block to display:none but changing the opacity, height and padding instead
please review this one:
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
var hint = document.getElementById('hint');
if (hint.classList.contains('h-hide')) {
hint.classList.remove('h-hide');
} else {
hint.classList.add('h-hide');
}
});
div#hint {
display: block;
background: gold;
color: orangered;
padding: .5em;
font-weight: bold;
transition: .5s all linear;
opacity: 1;
overflow: hidden;
height: 100px;
}
#hint.h-hide {
padding: 0;
opacity: .25;
height: 0;
}
<div id='hint'>
<p>This is some hint on how to be safe in this community</p>
<p>This is another hint on how to be safe in this community</p>
</div>
<button>show hint</button>
the drawback for this approach is we have to keep tract of the div#hint height and change it using javascript if needed.
var btn = document.querySelector('button');
btn.addEventListener('click', function(){
var hint = document.getElementById('hint');
if(hint.style.visibility == 'hidden'){
hint.style.visibility = 'visible';
hint.style.opacity = '1';
}
else{
hint.style.visibility = 'hidden';
hint.style.opacity = '0';
}
});
div#hint{
background: gold;
color: orangered;
padding: .5em;
font-weight: bold;
transition: visibility 1s, opacity 0.5s linear;
}
<div id='hint'>
<p>This is some hint on how to be safe in this community </p>
<p>This is another hint on how to be safe in this community </p>
</div>
<button> show hint </button>
I think using visibility over display is better option
Without using css3 transition, you can use js setInterval to change some css property of the div, such as:
Change opacity from 0 to 1
Change height from 0 to full height
Change width from 0 to full width
Initially, you should have display: none; opacity: 0; height: 0; width: 0'
Then you have to change display: none to display: block; before you use setInterval to change other properties.
(I guess you know how to hide the div)
You can also use setTimeout(), with a trick of recursive.
Try something like this:
var btn = document.querySelector('button');
btn.addEventListener('click', function(){
var hint = document.getElementById('hint');
hint.classList.toggle("hide");
});
.hint{
background: gold;
color: orangered;
padding: .5em;
font-weight: bold;
visibility: visible;
opacity: 1;
max-height: 500px;
transition: visibility 0s, opacity 0.3s, max-height 0.6s linear;
}
.hide {
visibility: hidden;
opacity: 0;
max-height: 0px;
transition: max-height 0.3s, opacity 0.3s, visibility 0.3s linear;
}
<div id='hint' class="hint">
<p>This is some hint on how to be safe in this community </p>
<p>This is another hint on how to be safe in this community </p>
</div>
<button> show hint </button>
I have also tried to do this
please have a look if it can help you
var btn = document.querySelector('button');
var hint = document.getElementById('hint');
hint.style.opacity = 1;
hint.style.transition = "opacity 1s";
btn.addEventListener('click', function(){
if(hint.style.opacity == 0 || hint.style.opacity==''){
hint.style.opacity = 1;
}
else{
hint.style.opacity = 0;
}
});
let redBox = document.getElementById('redBox');
let blueBox = document.getElementById('blueBox');
let [redButton, blueButton] = document.querySelectorAll('button'); //Destructuring
redButton.addEventListener('click', () => {
smoothDisplayNone(redBox);
});
blueButton.addEventListener('click', () => {
smoothDisplayNone(blueBox);
});
//By using smoothDisplayNone() function, you can add this effect to whatever element you want.
function smoothDisplayNone(selectedElement){
if(!selectedElement.classList.contains('animationDisplayNone')){
selectedElement.classList.add('animationDisplayNone');
selectedElement.classList.remove('animationDisplayBlock');
}
else{
selectedElement.classList.remove('animationDisplayNone');
selectedElement.classList.add('animationDisplayBlock');
}
}
#redBox{
width: 200px;
height: 200px;
background-color: red;
}
#blueBox{
width: 200px;
height: 200px;
background-color: blue;
}
.animationDisplayNone{
animation: smoothDisplayNone 0.5s linear forwards;
}
.animationDisplayBlock{
animation: smoothDisplayBlock 0.5s linear forwards;
}
/*You should set the width and height according to the size of your element*/
#keyframes smoothDisplayBlock{
0% { opacity: 0; width: 0px; height: 0px; }
25% { opacity: 0.25; }
50% { opacity: 0.50; }
75% { opacity: 0.75; }
100% { opacity: 1; width: 200px; height: 200px; }
}
#keyframes smoothDisplayNone {
0% { opacity: 1; width: 200px; height: 200px; }
25% { opacity: 0.75; }
50% { opacity: 0.50; }
75% { opacity: 0.25; }
100% { opacity: 0; width: 0px; height: 0px; }
}
<div id="redBox"></div>
<div id="blueBox"></div>
<button type="button" style="margin-top:10px;">Red</button>
<button type="button" style="margin-top:10px;">Blue</button>
The code looks long at first glance but it is actually very simple to understand. I used the power of css animation to create a smooth effect.
You can use smoothDisplayNone() function easily.
With the help of internet, I came up with something like this: http://codepen.io/birjolaxew/pen/yJYLyz
The author of this posts just fixed my syntax errors :);
But I came across another problem, how can I implement the setInterval here? so each second or so the radio is checked and the next image proceeds. I've googled a few videos about it but it didn't really aid me much. Perhaps seeing the code to my specific problem would help me in my understanding!
Code:
<!-- Images -->
<div class="fb featuredslider_container">
<div id="images">
<img src="https://s-media-cache-ak0.pinimg.com/736x/a4/11/3e/a4113ec2da852f2eaa65af72e96decb6.jpg" />
<img src="http://cdn.arstechnica.net/wp-content/uploads/2015/09/GooglePlus-logos-02-980x980.png" />
<img src="http://img05.deviantart.net/6b35/i/2013/015/7/9/the_white_dog_sophie_2_by_thecakemassacre-d5rko7g.jpg" />
</div>
<!-- Radio Sutff -->
<div class="featuredradiowrap">
<input checked class="featuredradio" id="featureditemslider1" name="itemslider" type="radio">
<label for="featureditemslider1"></label>
<input class="featuredradio" id="featureditemslider2" name="itemslider" type="radio">
<label for="featureditemslider2"></label>
<input class="featuredradio" id="featureditemslider3" name="itemslider" type="radio">
<label for="featureditemslider3"></label>
</div>
</div>
Css:
.featuredslider_container{
position: relative;
width: 500px;
height: 250px;
margin: 0 auto 32px;
overflow: initial; /* Change to overflow:hidden if you want to see the final product */
box-shadow: 0 0 0 2px #BFB198;
}
#images {
font-size: 0;
/*Remove white space */
width: 1500px;
height: 100%;
animation: move-images 8s infinite;
position: absolute;
left: 0;
top: 0;
}
#images img {
width: 500px;
height: 100%;
}
/* Radio Sutff */
input[type="radio"] {
display: none;
}
.featuredradiowrap {
position: absolute;
bottom: 0.8rem;
left: 50%;
transform: translateX(-50%);
}
.featuredradio + label:before {
content: "";
display: inline-block;
margin-right: 2px;
border-radius: 30px;
background: #00a0ff;
height: 17px;
width: 17px;
}
input[type="radio"]:checked + label:before {
background: orange;
}
Javascript
var featuredRadio = document.getElementsByClassName("featuredradiowrap")[0];
var images = document.getElementById("images");
function leftAnimation() {
if (document.getElementById("featureditemslider1").checked == true) {
images.style.transition = "left 2s linear 0s";
images.style.left = "0";
} if (document.getElementById("featureditemslider2").checked == true) {
images.style.transition = "left 2s linear 0s";
images.style.left = "-500px";
}
if (document.getElementById("featureditemslider3").checked == true) {
images.style.transition = "left 2s linear 0s";
images.style.left = "-1000px";
}
}
featuredRadio.addEventListener("click", leftAnimation);
Try this one. You are actually targeting the wrapper, not the inputs.
var featuredRadio = document.getElementsByClassName("featuredradio");
var images = document.getElementById("images");
function leftAnimation() {
if (featuredRadio[0].checked == true) {
images.style.transition = "left 2s linear 0s";
images.style.left = "0";
} else if (featuredRadio[1].checked == true) {
images.style.transition = "left 2s linear 0s";
images.style.left = "-500px";
}
else if (featuredRadio[2].checked == true) {
images.style.transition = "left 2s linear 0s";
images.style.left = "-1000px";
}
}
featuredRadio.addEventListener("click", leftAnimation);