I'm currently trying to do a transform (rotateY) on an A element, that have already been animated in CSS.
To sum up : the first animation happens when the user scroll to this block, I had a "show" class, which launch a css animation. This works nice. On a second time, when the .show element is hover, I make him rotate. That second animation, as you can see, is buggy. It flickers, and don't work as expected.
Here's the CSS (Sass / Compass) part :
li
width: 23%
float: left
background: top center url('../img/bgHexa.png') no-repeat
&+li
margin-left: 2.5%
& > a
background: url('../img/pictosHome.png') 65px 60px no-repeat
width: 100%
display: block
height: 220px
opacity: 0
position: relative
top: 90px
+transform(rotateY(135deg))
+transition(all 0.6s ease-in-out)
&.show
top: 0
opacity: 1
+transform(rotateY(0))
&.hover
+transform(rotateY(180deg))
The JS part :
if( app.toTop >= $('#prezComp ul').offset().top- app.height/2){
var nb = 0;
var int = setInterval( function(){
var el = $('#prezComp .picto').eq(nb);
el.addClass('show');
nb++;
if( nb > 4) {
clearInterval(int);
}
}, 300);
}
I tried many HTML hacks, I tried with JS, it doesn't work better...
What am I doing wrong ?
Mouse hover is not happing at the time ,Try this code:
CSS:
#prezComp li { //style.css:558
width: 23%;
float: left;
position: relative;
z-index: 100000;
background: top center url("../img/bgHexa.png") no-repeat;
}
Related
For a project, I am trying to hover background colour change effect to specific part of image. Suppose I have this image
Now I want that when I hover over the orange on the right side I the background glow should change. Similarly I can do it for the other items in the image.
I could not find any property where I can specify coordinates of the image where hover effect can be applied to.
Is there any way this is possible? Any pre processing through photoshop or some software that might help?
edit: by background glow I mean using drop-shadow(16px 16px 20px red);property
I've made you an example with just the right-most orange, but you get the idea. just place SVGs and give each a unique class name (for size/position).
You can use an online tool, such as this, to create your SVG shapes.
A thing to keep in mind is if the image resizes, the position & size of the highlights should remain correct (this is why working with percentages is best)
.imageWrapper {
width: 500px;
position: relative;
}
.imageWrapper img {
width:100%; height:100%;
object-fit: contain;
}
.image-area {
position: absolute;
top: 69.5%; /* position should be in percentages */
left: 73.5%; /* position should be in percentages */
transition: .4s;
mix-blend-mode: lighten; /* work the best with the default black fill of svg shapes */
cursor: pointer;
}
.image-area:hover {
filter: drop-shadow(0 0 20px gold);
}
.image-area--orange-1 {
/* sizes should be in percentages */
width: 21%;
height: 18%;
}
<div class='imageWrapper'>
<!-- fill with SVG areas -->
<svg viewBox="0 0 100 100" class='image-area image-area--orange-1'>
<circle cx="50" cy="50" r="50"/>
</svg>
<!-- -->
<img src="https://i.stack.imgur.com/8BVo6.jpg"/>
</div>
Please consider using the image region mapping, this should be standard for most browser and don't need image manipulation
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map
const circleClip = document.querySelector("#bg");
function removeIntro() {
circleClip.classList.remove("intro");
}
function circleMove(e) {
removeIntro();
circleClip.style.setProperty("--x", e.clientX + "px");
circleClip.style.setProperty("--y", e.clientY + "px");
}
document.addEventListener("mousemove", circleMove);
circleClip.addEventListener("touchmove", (e) => {
removeIntro();
let touch = e.touches[0];
e.preventDefault();
circleClip.style.setProperty("--x", touch.clientX + "px");
circleClip.style.setProperty("--y", touch.clientY + "px");
});
:root {
--x: 0px;
--y: 0px;
}
body {
position: relative;
margin: 0;
overflow: hidden;
background-image: url(https://i.stack.imgur.com/8BVo6.jpg);
background-size: 100% 35%;
backdrop-filter: grayscale(100%);
}
#bg {
position: relative;
background: url(https://i.stack.imgur.com/8BVo6.jpg) no-repeat;
background-size: 100% 35%;
min-height: 300vh;
clip-path: circle(10% at var(--x) var(--y));
}
#bg.intro {
clip-path: circle(100% at 50% 50%);
animation: circleIntro 1800ms cubic-bezier(0.645, 0.045, 0.355, 1) both;
}
#keyframes circleIntro {
100% {
clip-path: circle(10% at 50% 50%);
}
}
<div id="bg" class="intro"></div>
I'm using a png sprite with a transparent background as button art in a list.
.single-pdsh #navlist li {
margin: 0;
padding: 0;
list-style: none;
opacity: .15;
transition: 0.3s;
}
.single-pdsh #navlist li:hover,
.single-pdsh #navlist li:active,
.single-pdsh #navlist li:visited {
opacity: .25;
}
.single-pdsh #navlist li, .single-pdsh #navlist a {
height: 75px;
width: 75px;
display: block;
}
.single-pdsh li#prev {
position: absolute;
top: 50%;
left: 5px;
background: url('https://kidconqueror.com/wp-content/themes/twentytwentyone-child/images/nav_sprite_800x800.png');
background-size: 300px 300px;
background-position: -10px 0px;
background-repeat: no-repeat;
}
Button works as expected. Almost. Hover triggers opacity transition as designed.
However, after clicking the button, before page transition, the background of the list item appears. I've exaggerated it a little here for clarity.
Why is this happening?
Screenshot of glitch:
Sprite button art png:
Oddly, I switched from a Wordpress child theme based on Twenty Twenty One to one based on WP Bootstrap Starter and the weird effect went away. No clue why except that maybe bootstrap represents a more modern code base?
Is it possible to fade between sprite images on hover without calling out the image URL in the CSS?
I have a ton of two-image sprite sheets. I want each one to switch on hover, but the CSS will be far too bloated if I have to create a new element for every one with a "background: url(x)".
.frame {
height: 500px;
width: 500px;
overflow: hidden;
}
.sprite {
background: url(image.png) 0px 0px no-repeat;
position: relative;
height: 500px;
width: 500px;
}
.sprite::after {
content: "";
background: url(image.png) -500px 0px no-repeat;
opacity: 0;
transition: opacity 0.35s;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.sprite:hover::after {
opacity: 1;
transition: opacity: 0.35s;
}
I'd rather call them out here:
<div class="sprite frame">
</div>
Here's a JSFiddle of the effect I want, but I want to call out the image URL in the HTML, so I don't have 100 different CSS elements calling out different images.
Hmm. If you are open to a jQuery solution this may help. You can use a "data alt-src" HTML attribute to store two image URLs within one tag, then call a jQuery .hover() function on that class.
HTML:
<img class="xyz" data-alt src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />
jQuery:
var sourceSwap = function () {
var $this = $(this);
var newSource = $this.data('alt-src');
$this.data('alt-src', $this.attr('src'));
$this.attr('src', newSource);
}
$(function () {
$('img.xyz').hover(sourceSwap, sourceSwap);
});
http://jsfiddle.net/LmVRZ/2/
I realize this demo doesn't include the opacity transition but I think it could be built in.
I am having an issue with my fixed header.
On my homepage the fixed header works. This has been properly tested on various computers and mobile devices. The same fixed header however does not on any other page, say a product page or a blog post.
What it does is the following:
1) It ignores the fixed positioning and does not stick to the top.
2) It gets wrong width (width: 1010px)
This is my jQuery script for detecting if a user has scrolled, in order to add the class sticky to the header.
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$("body.new-template #header").addClass("sticky");
} else {
$("body.new-template #header").removeClass("sticky");
};
});
And this is my css.
body.new-template #header {
position: relative; top: 0; left: 0;
}
body.new-template #header.sticky {
position: fixed; z-index: 100; width: 100%;
background-color: white; top: 0; left: 0;
-webkit-box-shadow: 0px 3px 10px #ccc;
-moz-box-shadow: 0px 3px 10px #ccc;
box-shadow: 0px 3px 10px #ccc;
}
What i am doing wrong?
Your issue is two fold.
Part One - A class not applied to the body tag
The header is being fixed by this specific selection in your CSS:
body.new-template #header {}
This is satisfied on the homepage as the body has a class new-template, and thus the header will be fixed.
However, on all your other pages, the body does not have this class, and therefore the #header is not being fixed.
You could remove the body.new-template from the selector in your CSS, or add the new-template class to the body tag of each page you want the header to be fixed on.
Part Two - A bug in chrome with transform + position fixed
There is then also a bug in Chrome relating to position: fixed and transforms. https://bugs.chromium.org/p/chromium/issues/detail?id=20574
You have a transform here which is breaking your position: fixed:
body.new-template #page {
position: relative;
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
So remove that and add the .new-template class to resolve your issue.
Put your code $(window).scroll(function() {... inside the $(document).ready(function() { please.
Is there a way to write a CSS transition that would fade in an input text element while the user is typing?
Currently, text can fade in within a normal HTML text element because we can tell it to transition from 0 to 1 opacity; but input text doesn't exist before a user types it in.
So for example, if I type in my username, the letters that I type fade in, each one going from 0 to 1 opacity in .3 seconds.
I've tried using transition and animation, but want to keep it within CSS.
A possible way to achieve a similar effect: create a partially transparent overlay using linear-gradient and gradually reveal as you type by moving the mask position.
<div id='container'>
<input type='text'></input>
<div class='fader'></div>
</div>
$("input").on("keydown", function(e) {
var width = $("input").val().length + 1;
$(".fader").css("left", (width * 8) + 3);
});
#container {
position: relative;
height: 25px;
width: 400px;
}
input {
width: 100%;
}
input, .fader {
display: block;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
font-family: monospace;
}
.fader {
top: 2px;
bottom: 4px;
pointer-events: none;
background: linear-gradient(90deg, transparent 0px, white, 15px, white 100%);
transition: left 1s ease;
}
Here's what it looks like as a fiddle:
http://jsfiddle.net/go7trwzx/1/
I don't believe there is any way to do this with an HTML input element, and certainly not without Javascript. Any solution would require you to create individual elements for each letter, then apply transitions to each element individually.
If you'd like a visual of what that would look like, check out the "type" example and accompanying source code here:
http://codyhouse.co/demo/animated-headlines/index.html