Trying to rotate an image - if I type rotate: x 180deg; into the debug console it works - but nothing happens when trying to set it via js?
setTimeout(() => {
document.getElementById('look-arrow-img').style.rotate = "x 180deg;";
}, 1000);
https://jsfiddle.net/SamyH/dne7c18q/6/
Any help much appreciated
Try this, without the semicolon in quote here "x 180deg;" :
setTimeout(() => {
document.getElementById('look-arrow-img').style.rotate = "x 180deg";
}, 1000);
.centered {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.animate {
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
}
.full-screen-flex {
position: absolute;
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
}
<div id="look" class="full-screen-flex centered fade" style="pointer-events: none;">
<img id="look-arrow-img" class="animate" src="https://cdn-icons-png.flaticon.com/512/2/2231.png" style="width: 30%;">
<p id="look-dir" style="padding: 1rem; font-size: 2rem; color: black;"></p>
</div>
My previous answer with transform is a clockwise rotation:
setTimeout(() => {
document.getElementById('look-arrow-img').style.transform = "rotate(180deg)";
}, 1000);
.centered {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.animate {
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
}
.full-screen-flex {
position: absolute;
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
}
<div id="look" class="full-screen-flex centered fade" style="pointer-events: none;">
<img id="look-arrow-img" class="animate" src="https://cdn-icons-png.flaticon.com/512/2/2231.png" style="width: 30%;">
<p id="look-dir" style="padding: 1rem; font-size: 2rem; color: black;"></p>
</div>
Related
My modal has an issue where it displays the previous image just before displaying the one just clicked on. I believe that i need to reset the modal on close to prevent this from happening.
Just to clarify, the modal does not slide to the next image. It will need to be closed in order to select the next image.
I have tried resetting the HTML when the modal is closed, but it doesn't seem to work.
const modal = document.querySelector('.modal');
const previews = document.querySelectorAll('.solution-image-container img');
const original = document.querySelector('.full-img');
previews.forEach(preview => {
preview.addEventListener('click', () => {
modal.classList.add('open');
original.classList.add('open');
const originalSrc = preview.getAttribute('data-original');
original.src = originalSrc;
})
});
modal.addEventListener('click', (e) => {
if (e.target.classList.contains('modal')) {
modal.classList.remove('open');
original.classList.remove('open');
}
if (modal.style.opacity === 0) {
modal.innerHTML = "";
}
});
.content-container {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 3rem;
width: 100%;
}
.solution-image-container {
display: flex;
align-items: center;
justify-content: center;
width: 50%;
flex-direction: column;
}
.solution-image-container img {
max-width: 100%;
height: auto;
border-radius: 5px;
cursor: pointer;
}
.images-gallery {
display: flex;
align-items: center;
justify-content: center;
margin: 1rem 0;
grid-gap: 1rem;
width: 100%;
}
#gallery-img {
height: 150px;
width: 150px;
object-fit: cover;
}
.modal {
background: rgba(0, 0, 0, 0.7);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 50;
opacity: 0;
pointer-events: none;
transition: 0.25s ease-out;
}
.modal.open {
opacity: 1;
pointer-events: all;
}
.full-img {
position: absolute;
height: 80%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 5px;
}
<div class="content-container">
<div class="solution-image-container">
<img class="big-img"
src="https://source.unsplash.com/random/350x350"
srcset=""
data-original="https://source.unsplash.com/random/350x350"/>
<div class="images-gallery">
<img
id="gallery-img"
src="https://source.unsplash.com/random/151x151"
alt=""
srcset=""
data-original="https://source.unsplash.com/random/151x151"
/>
<img
id="gallery-img"
src="https://source.unsplash.com/random/152x152"
alt=""
srcset=""
data-original="https://source.unsplash.com/random/152x152"
/>
<img
id="gallery-img"
src="https://source.unsplash.com/random/153x153"
alt=""
srcset=""
data-original="https://source.unsplash.com/random/153x153"
/>
</div>
</div>
</div>
<div class="modal">
<img alt="" class="full-img" />
</div>
I have a div where I want to change the image and text when I scroll on it. I have gotten some of the way but I cant figure out how to keep the "parallax-row" fixed, but act like its scrolling? I have a code pen link to help below.
MY GOAL : When you scroll anywhere in the parallax-window everything should stick, but the image and text changes. I have seen some cool image effects using parallax so thats why I am learning it.
codepen
<html>
<body>
<!---------PARALLAX------->
<div class="parallax-window">
<div class="parallax-container">
<div class="parallax-row">
<div class="parallax-image-container">
<img src="https://cdn.pixabay.com/photo/2016/11/18/19/07/happy-1836445_1280.jpg" alt="">
</div>
<div class="parallax-text">
<h1>Title 1</h1>
<h3>This is a description.
</h3>
<div class="mouseicon">
<div class="mousewheel"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
/*PARALLAX */
.parallax-container::-webkit-scrollbar {
display: none;
}
.parallax-window {
position: relative;
height: 400px;
width: 100vw;
overflow-y: scroll;
overflow-x: hidden;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.parallax-container {
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
height: 1000px;
background-color: rgb(221, 221, 221);
}
.parallax-row {
display: flex;
justify-content: flex-start;
align-items: center;
height: 400px;
width: 100%;
}
.parallax-image-container {
display: block;
height: inherit;
}
.parallax-image-container img {
height: inherit;
}
.parallax-text {
height: inherit;
display: flex;
flex-direction: column;
align-items: left;
justify-content: center;
padding: 0em 4em;
}
.mouseicon {
margin: 1em;
display: flex;
justify-content: center;
width: 40px;
height: 65px;
border: solid 2px black;
border-radius: 50px;
}
.mousewheel {
width: 10px;
height: 20px;
background-color: black;
border-radius: 50px;
animation: scroll 1.5s infinite;
}
#keyframes scroll {
0% {
transform: translateY(0px);
opacity: 0.5;
}
100% {
transform: translateY(5px);
}
}
JS
//-------PARALLAX SCROLL-------- //
const parallaxContainer = document.querySelector(".parallax-window");
const parallaxImage = document.querySelector(".parallax-image-container img");
parallaxContainer.scrolltop = 0;
const parallaxText = document.querySelector(".parallax-text h1")
var scrollHandler = function () {
var newImageUrl = parallaxImage.src;
var scrollTopParallax =
parallaxContainer.scrollTop || parallaxContainer.scrollTop;
if (scrollTopParallax > 100) {
newImageUrl =
"https://cdn.pixabay.com/photo/2016/11/29/07/16/balancing-1868051__480.jpg";
parallaxText.innerHTML = "Title 2"
}
if (scrollTopParallax < 100) {
newImageUrl =
"https://cdn.pixabay.com/photo/2016/11/18/19/07/happy-1836445_1280.jpg";
parallaxText.innerHTML = "Title 1"
}
parallaxImage.src = newImageUrl;
console.log("new: " + parallaxImage.src);
};
parallaxContainer.addEventListener("scroll", scrollHandler);
I have updated my codepen with my own answer. essentially creating an overlay to scroll on and then changing the elements based on that invisible overlays scroll position. see link to codepen above.
I was programming a React application. And I wanted to start very simple. I drew a cube in 3d perspective using css. With it I created a button. Whenever this button is clicked, the transition to the next side of the cube is being shown. I achieved this with the following code.
import React, {useState} from 'react';
import './App.css';
function App() {
const [panel, setPanel] = useState(1);
const handlePanelIncrement = () => {
setPanel(panel + 1);
};
let boxArea;
const rotateRight = () => {
boxArea = document.getElementById('main-box-area');
boxArea.style.transition = "transform 1s linear 0s";
boxArea.style.transform = `rotate3d(0,1,0, -${panel*90}deg)`;
handlePanelIncrement();
boxArea=null;
};
return (
<div className="App">
<div className="app-body">
<div className="cube-panel">
<div className="wrapper">
<div id="main-box-area" className="box-area">
<div className="box front"/>
<div className="box back"/>
<div className="box left"/>
<div className="box right"/>
</div>
</div>
<div className="cube-actions">
<button onClick={rotateRight}>Right</button>
</div>
</div>
</div>
</div>
);
}
.App {
text-align: center;
height: 100%;
width: 100%;
margin:0px;
display: flex;
flex-direction: column;
}
.app-body{
display: flex;
width: 100%;
height: 100%
}
.cube-panel{
display: flex;
flex-direction: column;
}
.cube-actions{
width: 896px;
display: flex;
justify-content: space-around;
}
.wrapper{
display:flex;
justify-content: center;
align-items: center;
margin-bottom: 40px;
height: 482.3px;
width: 896px;
perspective: 1500px;
}
.box-area{
display: flex;
justify-content: center;
align-items: center;
width:100%;
height:100%;
position: relative;
transform-style: preserve-3d;
}
.box{
transform-style: preserve-3d;
position: absolute;
width:100px;
height:100px;
border: 2px solid black;
}
.front {
transform: translateZ(50px);
background-color: rgba(244, 50,50, 0.5);
}
.back {
transform: translateZ(-50px);
background-color: rgba(244, 50,50, 0.5);
}
.left {
transform-origin: left;
transform: translateZ(50px) rotateY(90deg);
background-color: rgba(244, 50,50, 0.5);
}
.right {
transform-origin: right;
transform: translateZ(50px) rotateY(-90deg);
background-color: rgba(244, 50,50, 0.5);
}
Everything works fine. But after the transition, the trigger-button can't be clicked anymore. It is disabled. What is curious is that if I click the button fast multiple times, the rotation works fine those many times. It is disabled when I wait like a second after it was triggered.
Does anybody know why does this happen? Or where am I making the mistake? maybe I have to declare the style attributes in a different way but I don't know how.. I searched everywhere but I had no success.
Thank you for your time!
I have a textbox that I would like to do a fancy text slide in/out effect on whenever I change the text in it. I am able to switch the text and trigger the animation and it even works multiple times, but there is a weird jumping into place/resizing of the container div that happens during the animation. I have tried animating the margins of the text elements along with the rest of the animation but that doesn't work. I can't have the div resize because it is contained in a flexbox with an image right below it that I don't want to be pushed out of the way. What can I do to fix this and make the animation smoother?
function textboxWriteAnimated(str) {
const newText = document.createElement('p');
const currentText = document.getElementById("centerText");
const textContainer = document.getElementById("centerTextContainer");
newText.className = "fadingin";
newText.innerHTML = str;
newText.id = "centerText";
currentText.classList.add(["fadingout"]);
textContainer.appendChild(newText);
setTimeout(() => {
textContainer.removeChild(currentText);
document.getElementById("centerText").classList.remove(["fadingin"]);
}, 500)
}
setTimeout(() => {
textboxWriteAnimated("Does it work?");
setTimeout(() => {
textboxWriteAnimated(":(");
}, 1500)
}, 1000)
body, html {
margin: 0;
padding: 0;
overflow: hidden;
}
#vert-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
#centerTextContainer {
font-size: 16px;
text-align: center;
line-height: 5px;
margin: 10px;
max-height: 37px;
min-height: 37px;
}
#img-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 50vw;
}
#links-container img {
margin: 5px;
}
#keyframes fade-out {
from {
bottom: 0px;
opacity: 100%;
font-size: 16px;
}
to {
bottom: 25px;
opacity: 0%;
font-size: 4px;
}
}
#keyframes fade-in {
from {
top: 25px;
opacity: 0%;
font-size: 4px;
}
to {
top: 0px;
opacity: 100%;
font-size: 16px;
}
}
.fadingout {
animation-name: fade-out;
animation-duration: 500ms;
animation-fill-mode: forwards;
}
.fadingin {
animation-name: fade-in;
animation-duration: 500ms;
}
<div id="vert-container">
<div id="centerTextContainer">
<p id="centerText">Testing...</p>
</div>
<div id="img-container">
<img src="https://img.shields.io/badge/Test-Image-black.svg">
</div>
</div>
Try like this:
function textboxWriteAnimated(str) {
const newText = document.createElement('p');
const currentText = document.getElementById("centerText");
const textContainer = document.getElementById("centerTextContainer");
newText.className = "fadingin";
newText.innerHTML = str;
newText.id = "centerText";
currentText.classList.add(["fadingout"]);
textContainer.appendChild(newText);
setTimeout(() => {
textContainer.removeChild(currentText);
document.getElementById("centerText").classList.remove(["fadingin"]);
}, 500)
}
setTimeout(() => {
textboxWriteAnimated("Does it work?");
setTimeout(() => {
textboxWriteAnimated(":)");
}, 1500)
}, 1000)
body, html {
margin: 0;
padding: 0;
overflow: hidden;
}
#vert-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
#centerTextContainer {
font-size: 16px;
text-align: center;
line-height: 5px;
margin: 10px;
max-height: 37px;
min-height: 37px;
position: relative;
display:block;
width:100%;
}
#centerTextContainer > p {
position:absolute;
display:block;
width:100%;
left:0;
right:0;
}
#img-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 50vw;
}
#links-container img {
margin: 5px;
}
#keyframes fade-out {
from {
bottom: 0px;
opacity: 100%;
font-size: 16px;
}
to {
bottom: 25px;
opacity: 0%;
font-size: 4px;
}
}
#keyframes fade-in {
from {
top: 25px;
opacity: 0%;
font-size: 4px;
}
to {
top: 0px;
opacity: 100%;
font-size: 16px;
}
}
.fadingout {
animation-name: fade-out;
animation-duration: 500ms;
animation-fill-mode: forwards;
}
.fadingin {
animation-name: fade-in;
animation-duration: 500ms;
}
<div id="vert-container">
<div id="centerTextContainer">
<p id="centerText">Testing...</p>
</div>
<div id="img-container">
<img src="https://img.shields.io/badge/Test-Image-black.svg">
</div>
</div>
The p elements in the animation need absolute positioning so that the top and bottom transitions will work as expected.
I'm relatively new to Jquery and I'm trying to make a mouseover transition so when you hover over the title the background image should be changed with some ease css transition but nothing seems to work. I also tried Jquery fadeIn method but that also doesn't seem to work. What's the correct way to make the transition work?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Roboto;
background-color: #000;
position: relative;
overflow-x: hidden;
transition: all ease 2s;
}
.banner {
width: 100%;
height: 100vh;
transition: all 1s ease;
}
.banner-strip {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
transition: all .5s ease-in-out;
}
.strip {
position: relative;
width: 20%;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 0;
flex-direction: column;
/*background-color: #a03131;*/
color: #fff;
transition: all 1s ease;
}
.strip p {
text-align: center;
}
.strip big {
text-transform: uppercase;
font-size: 24px;
font-weight: 700;
letter-spacing: 2px;
}
.strip img {
line-height: 24px;
font-size: 14px;
text-align: center;
font-style: italic;
opacity: 0;
visibility: hidden;
transition: all ease 2s;
}
.banner-img img {
position: absolute;
width: 100%;
height: 100vh;
opacity: 0;
transition: all .5s ease-in-out;
}
.banner-img {
transtition: all .5s ease-in-out;
}
.strip:hover {
height: 100%;
padding: 15px 0 90px;
transition: all 1s ease;
}
.strip:hover img {
opacity: 1;
visibility: visible;
transition: all ease 2s !important;
}
<body>
<div class="banner">
<div class="banner-img">
<img src="default.jpg" alt="">
</div>
<div class="banner-strip">
<div class="strip" data-image="living.jpg">
<h2>Tattoo</h2><br>
<a href="tattoo.html">
<img src="ikonka4.png" alt="" style="width: 60px; height:60px">
</a>
</div>
<div class="strip" data-image="bedroom.jpg">
<h2>Beauty</h2>
<a href="beauty.html">
<img src="ikonka2.png" alt="" style="width: 60px; height:60px">
</a>
</div>
<div class="strip" data-image="dining.jpg">
<h2>Piercing</h2>
<a href="piercing.html">
<img src="ikonka3.png" alt="" style="width: 60px; height:60px">
</a>
</div>
</div>
</div>
<!-- jquery cdn link -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var image = $(".banner-img").find("img").attr("src");
$(".banner-img img").css("opacity", "1").fadeIn("slow");
$(".strip").mouseover(function() {
var currentImage = $(this).attr("data-image");
$(this).parent().parent().find(".banner-img img").attr("src", currentImage);
$(".banner-img img").fadeIn("slow");
});
$(".strip").mouseout(function() {
$(".banner-img img").fadeIn("slow");
$(".banner-img img").attr("src", image).fadeIn("slow"); // SET DEFAULT IMAGE WHEN MOUSE OUT
});
});
</script>
See example below. I've used the background-color property for example purposes but this can easily be substituted with background-image.
$(function() {
$(".strip").mouseover(function() {
var curImg = $(this).attr("data-image");
$(".banner-img").css("background-color", curImg);
});
$(".strip").mouseout(function() {
$(".banner-img").css("background-color", '#000');
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Roboto;
position: relative;
overflow-x: hidden;
}
.banner {
position: fixed;
width: 100%;
height: 100px;
}
.banner-img {
position: fixed;
width: 100%;
height: 100px;
background-color: #000;
transition: background-color 1s ease-in-out;
}
.banner-strip {
display: flex;
align-items: center;
justify-content: space-around;
}
.strip {
position: relative;
width: 20%;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: #fff;
}
.strip img {
display: block;
width: 60px;
height: 60px;
background: #FFF;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.strip:hover img {
opacity: 1;
}
<div class="banner">
<div class="banner-img">
</div>
<div class="banner-strip">
<div class="strip" data-image="red">
<a href="tattoo.html">
<img src="ikonka4.png" alt="">
</a>
<h2>Tattoo</h2>
</div>
<div class="strip" data-image="blue">
<a href="beauty.html">
<img src="ikonka2.png" alt="">
</a>
<h2>Beauty</h2>
</div>
<div class="strip" data-image="green">
<a href="piercing.html">
<img src="ikonka3.png" alt="">
</a>
<h2>Piercing</h2>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>