background transition fix and background dim on hover [fiddle inside] - javascript

I got completely stuck on this. I have a container with background image. Inside the container are 3 little circles. What I am trying to do is to zoom the background image when I hover over it and dim the background image when I hover over any of the 3 little circles.
I got to the point where the 3 circles are properly overlapping the container and the background zooms in on hover. But I have 2 issues
no. 1 I am not very fond of the way I am achieving the overlay of the circles, which is this code
#circle_wrap{
position: absolute;
margin-top: -130px;
}
no. 2 Is that I have no clue how to dim the background. My original intention was to have a hidden black conteniner with 0.5 opacity that would be displayed when I hover over one of the circles. But I couldn't figure out how to select the overlay.
JSFIDDLE here
If anything couldn't be solved with css only, I'd accept jquery solution as well.
I'm looking for any advice/tips/solutions you guys have, I really need to get this working.
Thank you.

Finally got so angry I am not able to do it with css that I made it with jquery :(
If anyone is interested here is the result
I have at least fixed the issue no1 with better css but the second is done with jquery.
solved no.1 with
.circle_wrap{
position: absolute; bottom: 0; width: 100%; height: 100px;
}
and applying position:relative on its parent
and the solution for no.2 is
$(".circle_wrap").hover(function () {
$(this).siblings("img").css("opacity", "0.2");
},
function () {
$(this).siblings("img").css("opacity", "1");
});
EDIT: safari support
.wrap img:hover{
-moz-transition: scale(1.1) rotate(0deg);
transform: scale(1.1) rotate(0deg);
-webkit-animation-name: scaleThis;
-webkit-animation-duration:5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function:ease-in-out;
}
#-webkit-keyframes scaleThis {
0% { -webkit-transform:scale(1) rotate(0deg); }
10% { -webkit-transform:scale(1.1) rotate(0deg); }
100% {-webkit-transform:scale(1.1) rotate(0deg); }
}

Related

Trigger a webkit animation to scroll when in viewport?

I've been scouring the internet and StackOverflow for quite some time to find a solution to my problem but nothing is working. So figured I'd just make my own post to throw into the ring of questions about triggering animations when scrolling in viewport. I have read CSS3-Animate elements if visible in viewport (Page Scroll) and I've tried adapting every single solution on that answer and it does not fix the issue. My question uses webkit and the solutions in that question similar to mine do not work even if adapted to my code.
I'm trying to highlight some text using a webkit animation. The HTML/CSS works well! I'm just trying to get it to trigger when the text enters the viewport rather than when the page loads. Preferably using only JavaScript since I want the page to load very quickly.
HTML
I don't have any JS to include because I've tried a ton of solutions and it's just not working for the formatting of the code with webkit animation. I'm very new to JS so any help is appreciated.
<h1>
<ol>
<li>Highlight <mark>this text</mark> upon scrolling.</li>
</ol>
</h1>
CSS
mark {
-webkit-animation: 1s highlight 1s 1 normal forwards;
animation: 1s highlight 1s 1 normal forwards;
background-color: none;
background: linear-gradient(90deg, #C7A4D8 50%, rgba(255, 255, 255, 0) 50%);
background-size: 200% 100%;
background-position: 100% 0;
}
#-webkit-keyframes highlight {
to {
background-position: 0 0;
}
}
#keyframes highlight {
to {
background-position: 0 0;
}
}
Thanks for your help.
You can do as follows.
CSS
In the css file add 2 classes. One called "hidden" and the other one called "show". The hidden class will be the default class, which is how the element is positioned when it's not in the viewport. The show class will be used for the trasition when the element will enter the viewport.
In my case, when the element is not in the viewport, it's not visible (opacity: 0), it's positioned on the right with some blur.
.hidden {
opacity: 0;
filter: blur(5px);
transform: translateX(50%);
transition: all 1s;
}
.show {
opacity: 1;
filter: blur(0);
transform: translateX(0);
}
HTML
In the HTML code you will need to add the hidden class to any element you want to keep hidden when out of the viewport.
<!DOCTYPE html>
<html lang="en">
<body>
<h1 class="hidden">My title</h1>
</body>
</html>
JavaScript
In the JavaScript file you will need to add the following code. This code will monitor each element with the "hidden" class and when any of these enter the viewport the "show" class will be added to it. The "show" class will then be removed when it exits the viewport (if you don't want that to happen, and therefore want to play the animation only once remove the else block).
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
console.log(entry)
if (entry.isIntersecting) {
entry.target.classList.add('show');
} else {
entry.target.classList.remove('show')
}
})
})
const hiddenElements = document.querySelectorAll('.hidden');
hiddenElements.forEach((element) => observer.observe(element));

I am using some scroll animations but it is causing horizontal scroll out of the screen

I have set up some scroll animations on many elements of a site I'm building.
I'm using these CSS rules:
.hiddenLeft {
opacity: 0;
filter: blur(5px);
transform: translateX(-090%);
transition: all 1s;
}
.hiddenRight {
opacity: 0;
filter: blur(5px);
transform: translateX(90%);
transition: all 1s;
}
.show {
opacity: 1;
filter: blur(0);
transform: translateX(0);
}
The hiddenLeft and hiddenRight classes are in the elements by default, and then when they are intersected during vertical scroll the show classes are added.
It all works fine, except it has created horizontal scroll to the right out of the width of the site into blank space.
I would like to keep the animations as they are but without the horizontal scroll.
A picture of me scrolling out to the side into the blank space for reference:
enter image description here
I made a very basic replication here:
https://codepen.io/acodeaday/pen/NWMYWNL
I can see that the offending line is
transform: translateX(90%);
But that makes the animation very aesthetically pleasing. So I'm hoping there is a way to solve it while keeping that.
Try using
max-width: 100%!important; height: auto; overflow: hidden!important;
this code whatever you put all of your animation inside. That can be a div. Hope this help~

CSS3, div not aligned properly after rotation

I am in front of a mystery: I have a box, the css defines the width of each side.
I use links to rotate the box, adding a class to show each side.
The link just clears the classes of the box, and adds one of the following class:
.show-front {
transform: rotateY(0deg);
}
.show-back {
transform: rotateY(-180deg);
}
.show-left {
transform: rotateY(-270deg);
}
.show-right {
transform: rotateY(-90deg);
}
However, depending on the side in front, the alignment of the div is not the same.
I isolated my problem and created a codepen at the following location: http://codepen.io/3MO/pen/XpwYBB
I check the dimensions and coordinates of each side brought to front, I cannot see the problem. What do I miss?
Thanks a lot in advance!
The divs don't fit inside the parrent.
You forgot the additional border-width on your boxSide divs.
Your #mainBox should have width: 1102px;.

Can anyone help me figure out how to do this Javascript?

I saw this website http://www.montere.it/?lang=en and I love how they use the Javascript on their website. When you scroll down, the image will slightly appear and flip. I have tried so hard to find the sample online but none of them are like this. Or at least can anyone give me the website that has the Javascript collection.
Appreciate for all your help.
I ripped the CSS animation code straight out of their page
#keyframes flipInY {
0% {
-webkit-transform:perspective(1000px) rotateY(20deg);
-ms-transform:perspective(1000px) rotateY(20deg);
transform:perspective(1000px) rotateY(20deg);
opacity:0
}
100% {
-webkit-transform:perspective(1000px) rotateY(0deg);
-ms-transform:perspective(1000px) rotateY(0deg);
transform:perspective(1000px) rotateY(0deg);
opacity:1
}
}
.flipInY {
-webkit-backface-visibility:visible !important;
-ms-backface-visibility:visible !important;
backface-visibility:visible !important;
-webkit-animation-name:flipInY;
animation-name:flipInY
}
.animated {
-webkit-animation-duration:.7s;
animation-duration:.7s;
-webkit-animation-fill-mode:both;
animation-fill-mode:both
}
Run JSFiddle http://jsfiddle.net/4of7L5aL/4/
Basically when the user scrolls, you add the animated class to the element.

How to zoom in to the center of a div

I want to create a zoom in effect on my large div. I have searched many questions and still don't know how this work.
I want to be able to zoom into the center of the user screen instead of the set position.
http://jsfiddle.net/kB27M/1/
I have tried css3 zoom feature and animate zoom property but still can't pull this one. Can anyone help me about it? Thanks a lot!
You should scale the div:
.scaled {
-moz-transform: scale(3);
-webkit-transform: scale(3);
-ms-transform: scale(3);
transform: scale(3);
}
div {
transition: all 500ms ease-in;
}
Simply apply the CSS class to the div and then use the transitionEndevent to apply further styles via .animate().
On transitionEnd (discard live(), use on()): jsfiddle

Categories