fade multiple images on click with display properties - javascript

I'm trying to make a simple click the color button to change the color of the product image, and I am completely new to javascript but I found this code that allows me to switch between multiple images with multiple buttons, however I want to get them to crossfade when clicked.
For example I made this where there are 2 iPhones, and the button corresponds to the color of the phone (ideally I would like 3+ options)
function showImg( id ) {
for ( i = 1; i < 10; i++) {
var obj = document.getElementById( "picture" + i );
if (obj != null)
obj.className = 'hide';
}
var obj = document.getElementById( "picture" + id );
if (obj != null)
obj.className = 'show';
}
.show {
display: block;
opacity: 1;
max-height: 100vh;
margin: 0 auto;
transition: ease-in-out 1s;
}
.hide {
display: none;
opacity:0;
max-height: 100vh;
margin: 0 auto;
transition: ease-in-out 1s;
}
.btn {
margin: 20px !important;
}
.black {
background: #333;
background: -webkit-linear-gradient(left top, #333, #555) !important;
background: -o-linear-gradient(bottom right, #333, #555) !important;
background: -moz-linear-gradient(bottom right, #333, #555) !important;
background: linear-gradient(to bottom right, #333, #555) !important;
}
.silver {
background: #ccc;
background: -webkit-linear-gradient(left top, #ccc, #fff) !important;
background: -o-linear-gradient(bottom right, #ccc, #fff) !important;
background: -moz-linear-gradient(bottom right, #ccc, #fff) !important;
background: linear-gradient(to bottom right, #ccc, #fff) !important;
}
<div class="container">
<div class="row">
<div class="col">
<img id="picture1" src="https://images-na.ssl-images-amazon.com/images/I/515a5LWWpHL._SL1000_.jpg" title="Silver" class="show img-responsive">
<img id="picture2" src="https://images-na.ssl-images-amazon.com/images/I/613bFC-bCvL._SL1500_.jpg" title="Black" class="hide img-responsive">
</div>
<div class="col">
<button class="btn silver" onClick="showImg(1);" value="Silver"></button>
<button class="btn black" onClick="showImg(2);" value="Black"></button>
</div>
</div>
</div>

function showImg( id ) {
for ( i = 1; i < 10; i++) {
var obj = document.getElementById( "picture" + i );
if (obj != null)
obj.className = 'hide';
}
var obj = document.getElementById( "picture" + id );
if (obj != null)
obj.className = 'show';
}
.show {
animation: fade-in 1s ease-in-out forwards;
}
#keyframes fade-in{
0%{
opacity:0;
}
100%{
opacity:1;
}
}
img{
position:absolute;
max-height: 100vh;
left: 0;
right: 0;
margin: auto;
}
.hide {
animation: fade-out 1s ease-in-out forwards;
}
#keyframes fade-out{
0%{
opacity:1;
}
100%{
opacity:0;
}
}
.btn {
margin: 20px !important;
}
.black {
background: #333;
background: -webkit-linear-gradient(left top, #333, #555) !important;
background: -o-linear-gradient(bottom right, #333, #555) !important;
background: -moz-linear-gradient(bottom right, #333, #555) !important;
background: linear-gradient(to bottom right, #333, #555) !important;
}
.silver {
background: #ccc;
background: -webkit-linear-gradient(left top, #ccc, #fff) !important;
background: -o-linear-gradient(bottom right, #ccc, #fff) !important;
background: -moz-linear-gradient(bottom right, #ccc, #fff) !important;
background: linear-gradient(to bottom right, #ccc, #fff) !important;
}
<div class="container">
<div class="row">
<div class="col">
<img id="picture1" src="https://images-na.ssl-images-amazon.com/images/I/515a5LWWpHL._SL1000_.jpg" title="Silver" class="hide img-responsive">
<img id="picture2" src="https://images-na.ssl-images-amazon.com/images/I/613bFC-bCvL._SL1500_.jpg" title="Black" class="img-responsive">
</div>
<div class="col">
<button class="btn silver" onClick="showImg(1);" value="Silver"></button>
<button class="btn black" onClick="showImg(2);" value="Black"></button>
</div>
</div>
</div>

Related

Keyframes animation in styled-components

I am trying to write keyframe, animation in my code but I can't figure it out even after reading the documentation. Please help
```const ButtonStyle = styled.div`
.btn_rainbow {
text-decoration: none;
background-color: #c53ab4;
border-radius: 5px;
color: #fff;
cursor: pointer;
padding: 8px 16px;
&:hover {
background-image: linear-gradient(90deg,
#00C0FF 0%, #FFCF00 49%, #FC4F4F 80%, #00C0FF 100%);
}
}
`;
export default function Button() {
return (
<ButtonStyle>
<a class="btn_rainbow" href="#">Click Me!</a>
</ButtonStyle>
);
}```
The CSS Keyframe I wanted to add:
```#keyframes slidebg {
to {
background-position:20vw;
}
}
.btn_rainbow:hover{
background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 80%, #00C0FF
100%);
animation:slidebg 5s linear infinite;
}```
.glow-on-hover {
width: 220px;
height: 50px;
border: none;
outline: none;
color: #fff;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: '';
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
position: absolute;
top: -2px;
left:-2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity .3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #111;
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
}
<ButtonStyle>
<button class="glow-on-hover" href="#">Click Me!</button>
</ButtonStyle>

Adding shine animation not working in special cases

I have this function to shine any text element which is passed to it.
The first example here works fine (the second example doesn't work, I provide this in case this can help us find out the issue):
function Shine(textElement) {
textElement.classList.remove("shine");
setTimeout(() => textElement.classList.add("shine"), 20);
textElement.addEventListener("webkitAnimationEnd", shineEnd);
function shineEnd(e) {
if (e.animationName === 'shine') {
//textElement.classList.remove("shine");
textElement.removeEventListener("webkitAnimationEnd", shineEnd);
}
}
}
setTimeout(() => {
const prepareCaption = document.querySelector(".prepareCaption");
Shine(prepareCaption);
}, 2500);
.prepare-container {
position: absolute;
overflow: hidden;
display: flex;
align-items: center;
margin: 0 auto;
left: 2.5%;
height: 20vh;
width: 95%;
z-index: 11;
top: 55vh;
padding-top: 10px;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.prepareCaption {
position: relative;
filter: drop-shadow(2px 2px 2px #100021) drop-shadow(1px .05em 1px #0d021a);
text-align: center;
width: 100%;
color: #f8f7fa;
margin: 0 auto;
opacity: 1;
top: 0vh;
transition: top 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.shine {
background-color: currentColor;
background-image: linear-gradient(-42deg, transparent 0%, transparent 40%, #fff 50%, transparent 60%, transparent 100%);
background-position: -100%, 0%;
background-repeat: no-repeat, repeat;
background-size: 60%;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
animation: shine 4s ease-out 1 forwards;
}
#keyframes shine {
from { background-position: -100%, 0%; }
to { background-position: 200%, 0%; }
}
<div class="prepare-container">
<p class="prepareCaption" style="color: rgb(255, 0, 64); font-family: "Open Sans Semibold"; font-size: 28px;">This is shining</p>
</div>
I expect this function work in any satiation but unfortunately we have this second example in which the function acts wired and doesn't work as expected, here it is:
Note: the shine function is identical in both cases. the only difference is the element I pass to the function.
Here we want to shine the expandCaptionSpan id:
function Shine(textElement) {
textElement.classList.remove("shine");
setTimeout(() => textElement.classList.add("shine"), 20);
textElement.addEventListener("webkitAnimationEnd", shineEnd);
function shineEnd(e) {
if (e.animationName === 'shine') {
//textElement.classList.remove("shine");
textElement.removeEventListener("webkitAnimationEnd", shineEnd);
}
}
}
setTimeout(() => {
const expandCaption = document.querySelector("#expandCaptionSpan");
Shine(expandCaption);
}, 2500);
.expandCaption {
position: relative;
font-family: "Open Sans Semibold", sans-serif;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
text-align: center;
width: 100%;
font-size: 4vw;
color: #ff0000;
margin: 0 auto;
opacity: 1;
top: 0vh;
transition: top 0.3s ease-in-out, opacity 0.4s ease-in-out;
}
.arrow {
color: #ff9900;
font-size: 2vw;
}
.arrow-samll {
color: #ff4646;
font-size: 1.5vw;
}
.left-arrow {
padding-right: 7vw;
transition: 1s ease-in-out;
}
.right-arrow {
padding-left: 7vw;
}
.shine {
background-color: currentColor;
background-image: linear-gradient(-42deg, transparent 0%, transparent 40%, #fff 50%, transparent 60%, transparent 100%);
background-position: -100%, 0%;
background-repeat: no-repeat, repeat;
background-size: 60%;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
animation: shine 4s ease-out 1 forwards;
}
#keyframes shine {
from { background-position: -100%, 0%; }
to { background-position: 200%, 0%; }
}
<div class="expand-caption-container">
<p class="expandCaption"><span class="left-arrow arrow-samll">‹</span>
<span id="expandCaptionSpan">Permafrost</span><span class="right-arrow arrow-samll">›</span></p>
</div>
How can I fix the second example? What am I missing?
It seems that your JS is the same but CSS not. I've found that text-shadow is causing the issue. Just replace it with filter as it's done in your first example and it works. It seems that the issue is caused by render system.
function Shine(textElement) {
textElement.classList.remove("shine");
setTimeout(() => textElement.classList.add("shine"), 20);
textElement.addEventListener("webkitAnimationEnd", shineEnd);
function shineEnd(e) {
if (e.animationName === 'shine') {
//textElement.classList.remove("shine");
textElement.removeEventListener("webkitAnimationEnd", shineEnd);
}
}
}
setTimeout(() => {
const expandCaption = document.querySelector("#expandCaptionSpan");
Shine(expandCaption);
}, 2500);
.expandCaption {
position: relative;
font-family: "Open Sans Semibold", sans-serif;
/*text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);*/
filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 1));
text-align: center;
width: 100%;
font-size: 4vw;
color: #ff0000;
margin: 0 auto;
opacity: 1;
top: 0vh;
transition: top 0.3s ease-in-out, opacity 0.4s ease-in-out;
}
.arrow {
color: #ff9900;
font-size: 2vw;
}
.arrow-samll {
color: #ff4646;
font-size: 1.5vw;
}
.left-arrow {
padding-right: 7vw;
transition: 1s ease-in-out;
}
.right-arrow {
padding-left: 7vw;
}
.shine {
background-color: currentColor;
background-image: linear-gradient(-42deg, transparent 0%, transparent 40%, #fff 50%, transparent 60%, transparent 100%);
background-position: -100%, 0%;
background-repeat: no-repeat, repeat;
background-size: 60%;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
animation: shine 4s ease-out 1 forwards;
}
#keyframes shine {
from { background-position: -100%, 0%; }
to { background-position: 200%, 0%; }
}
<div class="expand-caption-container">
<p class="expandCaption"><span class="left-arrow arrow-samll">‹</span>
<span id="expandCaptionSpan">Permafrost</span><span class="right-arrow arrow-samll">›</span></p>
</div>

How to add a close button to alertify log with CSS?

I'm trying to add this close button to my alertify log message. The final display should be something like this:
I've tried a few solutions listed on SO but for some reason I'm not able to move the close button out of the alertify log message. The overflow for the close button is always hidden, and I've tried playing with the CSS settings but it is not working.
var fn = function() {
alertify.log('How to add close button? ');
};
fn();
.close-icon
{
position: absolute;
top: -5px;
right:-5px;
display:block;
box-sizing:border-box;
width:20px;
height:20px;
border-width:3px;
border-style: solid;
border-color:black;
border-radius:100%;
background: -webkit-linear-gradient(-45deg, transparent 0%, transparent 46%, white 46%, white 56%,transparent 56%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, white 46%, white 56%,transparent 56%, transparent 100%);
background-color:black;
box-shadow:0px 0px 5px 2px rgba(0,0,0,0.5);
transition: all 0.3s ease;
}
<link href="https://rawgit.com/alertifyjs/alertify.js/master/dist/css/alertify.css" rel="stylesheet"/>
<script src="https://rawgit.com/alertifyjs/alertify.js/master/dist/js/alertify.js"></script>
<button onclick="fn();">
<span class="ui-button-text">Test</span>
</button>
The problem is that the content overflows out of the container and that content is hidden. An easy way to fix this is with:
.alertify-logs > div {
overflow: visible;
}
var fn = function() {
alertify.log('How to add close button? ');
};
fn();
.close-icon
{
position: absolute;
top: -5px;
right:-5px;
display:block;
box-sizing:border-box;
width:20px;
height:20px;
border-width:3px;
border-style: solid;
border-color:black;
border-radius:100%;
background: -webkit-linear-gradient(-45deg, transparent 0%, transparent 46%, white 46%, white 56%,transparent 56%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, white 46%, white 56%,transparent 56%, transparent 100%);
background-color:black;
box-shadow:0px 0px 5px 2px rgba(0,0,0,0.5);
transition: all 0.3s ease;
}
.alertify-logs > div {
overflow: visible;
}
<link href="https://rawgit.com/alertifyjs/alertify.js/master/dist/css/alertify.css" rel="stylesheet"/>
<script src="https://rawgit.com/alertifyjs/alertify.js/master/dist/js/alertify.js"></script>
<button onclick="fn();">
<span class="ui-button-text">Test</span>
</button>

How to resize div based on screen resolution

I am creating a landing page with some interesting idea of menu. It is built with custom made hexagons. I want to make these hexacgons to fill all screen based on screen resolution. Basically i want to make them adapt to screen with no need to scroll.
my website: http://new.glstudios.lv/
<div class='grid'>
<div onclick="location.href='';" id="smallbox" ; class='grid--item'>
<div class='img' style='background-image: url();'></div>
<div class='container'>
<h2>Snowy Hills</h2>
<div class='desc'>Photo by Ales Krivec</div>
</div>
</div>
<div class='grid--item'>
<div class='img' style='background-image: url();'></div>
<div class='container'>
<h2>Bear</h2>
<div class='desc'>Photo by Thomas Lefebvre</div>
</div>
</div>
<div class='grid--item'>
<div class='img' style='background-image: url();'></div>
<div class='container'>
<h2>Owl</h2>
<div class='desc'>Photo by photostockeditor</div>
</div>
</div>
<div class='grid--item'>
<div class='img' style='background-image: url();'></div>
<div class='container'>
<h2>Horse</h2>
<div class='desc'>Photo by Annie Spratt</div>
</div>
</div>
<div class='grid--item'>
<div class='img' style='background-image: url();'></div>
<div class='container'>
<h2>Ice & Penguin</h2>
<div class='desc'>Photo by Teodor Bjerrang</div>
</div>
</div>
<div class='grid--item'>
<div class='img' style='background-image: url( );'></div>
<div class='container'>
<h2>Pile of Logs</h2>
<div class='desc'>Photo by Ales Krivec</div>
</div>
</div>
<div class='grid--item'>
<div class='img' style='background-image: url( );'></div>
<div class='container'>
<h2>Winter Tree</h2>
<div class='desc'>Photo by Mikael Kristenson</div>
</div>
</div>
</div>
And my CSS.
#smallbox {
cursor: pointer;
}
.x-main.full {
float: none;
display: block;
width: auto;
background:black;
}
#import url(https://fonts.googleapis.com/css?family=Arapey:400italic);
body {
background: white;
-webkit-font-smoothing: antialiased;
min-width: 1200px;
}
.grid {
padding: 60px;
margin: 0 auto;
max-width: 1200px;
}
.grid--item {
position: relative;
margin-top: -90px;
margin-right: 5px;
margin-left: 5px;
width: calc(33.33% - 10px);
float: left;
transition: all 0.5s;
overflow: hidden;
-webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
-webkit-shape-outside: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.grid--item:before {
display: block;
padding-top: 112.5%;
content: '';
}
.grid--item:nth-child(1), .grid--item:nth-child(2) {
margin-top: 0;
}
.grid--item:nth-child(7n - 1), .grid--item:nth-child(1) {
margin-left: 185px;
}
.img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-position: center center;
background-size: cover;
overflow: hidden;
-webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.img:before, .img:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
opacity: 0;
transition: opacity 0.5s;
}
.img:before {
background: rgba(128, 0, 128, 0.25);
}
.img:after {
background: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.5), transparent);
}
.container {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
opacity: 0;
text-align: center;
color: white;
will-change: transform;
backface-visibility: hidden;
transform: translate(-50%, -50%) scale(0.9);
transition: all 0.5s;
-webkit-shape-outside: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
shape-outside: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
h1,
h2 {
font-family: 'Arapey';
font-style: italic;
font-weight: 400;
}
h1 {
margin-top: 90px;
text-align: center;
font-size: 56px;
color: white;
}
h2 {
font-size: 32px;
color:white;
}
h2:before, h2:after {
display: inline-block;
margin: 0 0.5em;
width: 0.75em;
height: 0.03em;
background: turquoise;
content: '';
vertical-align: middle;
transition: all 0.3s;
}
.desc {
margin: 1em 0 0;
font-family: 'ATC Overlook';
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: bold;
font-size: 11px;
line-height: 1.5;
color: turquoise;
}
.grid--item:hover .img:before,
.grid--item:hover .img:after,
.grid--item:hover .container {
opacity: 1;
}
.grid--item:hover .container {
transform: translate(-50%, -50%) scale(1);
}
Assuming your HTML is something like this:
<div id="test-div"></div>
You could do this:
$(window).resize(function() {
$('#test-div').css('width', $(window).width());
$('#test-div').css('height', $(window).height());
});
But it's very hard to tell without you posting your actual HTML/Javascript code.
You could also try adding style="overflow:auto" after the divider tag.
I'm thinking you may want to use javascript or jquery to alter the css on resize.
Something along the lines of:
$(window).resize(function() {
$('.container').css('transform','translate(-50%, -50%) scale(dynamicvaluehere);');
});
You'll want to calculate your dynamicvaluehere variable based on window height and window width.

Hiding the content before loading intro

I would like to intro before loading the page content was hidden and shown after loading intro
$(document).ready(function() {
$('#content').removeClass('fullwidth');
$('#content').removeClass('fullwidth').delay(10).queue(function(next){
$(this).addClass('fullwidth');
next();
});
return false;
});
http://jsfiddle.net/19r5L0x7/2/
Try this work around:
$(document).ready(function() {
$('#content').removeClass('fullwidth');
//$('body').load(function() {
$('#content').removeClass('fullwidth').delay(50).queue(function(next){
$(this).addClass('fullwidth');
next();
});
$(".fullwidth").width(100);
var intervalId = setInterval(function(){
var w = $(".fullwidth .expand").width() / $('.fullwidth .expand').parent().width() * 100;
if(w==100)
{
clearInterval(intervalId);
$(".load").fadeOut("slow");
alert("done");
//your show content code
}
}, 0);
return false;
});
//});
body {
background: #161616 url(pattern_40.gif) top left repeat;
margin: 0;
padding: 0;
font: 12px normal Verdana, Arial, Helvetica, sans-serif;
height: 100%;
}
* {margin: 0; padding: 0; outline: none;}
img {border: none;}
#content {
width:100%;
height:5px;
margin:50px auto;
background:#000;
}
.fullwidth .expand {
width:100%;
height:1px;
margin:2px 0;
background:#2187e7;
position:absolute;
box-shadow:0px 0px 10px 1px rgba(0,198,255,0.7);
-moz-animation:fullexpand 10s ease-out;
-webkit-animation:fullexpand 10s ease-out;
}
#-moz-keyframes fullexpand {
0% { width:0px;}
100%{ width:100%;}
}
#-webkit-keyframes fullexpand {
0% { width:0px;}
100%{ width:100%;}
}
/* Loader Bar */
#-moz-keyframes fill {
0%{ opacity:0; }
100%{ opacity:1; }
}
#-webkit-keyframes fill {
0%{ opacity:0; }
100%{ opacity:1; }
}
.trigger, .triggerFull, .triggerBar {
background: #000000;
background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
background: -webkit-linear-gradient(top, #161616 0%,#000000 100%);
border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333;
font-family: Verdana, Geneva, sans-serif;
font-size: 0.8em;
text-decoration: none;
text-transform: lowercase;
text-align: center;
color: #fff;
padding: 10px;
border-radius: 3px;
display: block;
margin: 0 auto;
width: 140px;
}
.trigger:hover, .triggerFull:hover, .triggerBar:hover {
background: -moz-linear-gradient(top, #202020 0%, #161616 100%);
background: -webkit-linear-gradient(top, #202020 0%, #161616 100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="load">
<div id="content">
<span class="expand"></span>
</div>

Categories