Creating a marker felt highlight effect - javascript

I want to create an effect that when a user hovers over text it creates a market felt effect it - exactly like done here: http://courtneycarman.com/
I want it to animate in the same way.
Any pieces of code to how to do this would be greatful.
Thanks

Next time right click, inspect element.
It's right there. But, if you don't know what you are looking for it might be hard to figure out.
The effect is accomplished by a :hover style that will only activate when the element is hovered. In this case it has a gradient background that is normally 'hidden'by a 0 size.
When it's hovered it's set to 100% size.
Then there is a 'transition' defined, that will take care of the animating effect.
.semibold:hover {
background-size: 100% 100%;
}
.semibold {
background-image: linear-gradient(180deg,transparent 55%,#ffde17 0);
background-size: 0 100%;
background-repeat: no-repeat;
transition: background-size 0.4s ease;
<p>here is some text and stuff<strong class="semibold">and this is semibold</strong></p>

Related

How do I make an image endlessly repeat scroll in Javascript?

I'm making a webpage just for a bit of amusement. I want the background image to endlessly scroll to the left when the page is first loaded. The image is set to repeat-x in CSS and is seamless when laid end-to-end. Is this code I wrote aiming in the right direction?
I'm hoping to keep the JS vanilla just for simplicity but if this is better handled by JQuery, CSS or another library I'll be all ears.
I'll be very grateful for the help!
I've already tried some vanilla JavaScript code in a simple HTML document. My efforts so far haven't made the image move at all.
document.addEventListener("DOMContentLoaded", function() {
var y = 0;
while (true) {
y -= 1;
document.getElementById("bgImg").left = y;
}
})
#bgImg {
background-image: url("img1.jpg");
background-repeat: repeat-x;
width: 100%;
height: 660px;
display: inline;
}
<div id="bgImg">
</div>
This simply freezes my browser and doesn't scroll at all. Likely thanks to the "while(true)".
This is best accomplished with a CSS animation instead of JavaScript. CSS keyframed animations are designed to loop smooth transitions between pre-set property states with minimal memory overhead (and no synchronous while loops :P).
The only added bit of information you need to include is the width of your image. If you use this value as the x-coordinate of background-position in the to state of the animation, as soon as the background travels that many pixels, it will jump back to the from position. This jump will be invisible to the viewer, provided you've set the width correctly.
#bg {
background: url('https://www.gravatar.com/avatar/e47523b278f15afd925a473e2ac0b966?s=120&d=identicon&r=PG&f=1');
background-repeat: repeat-x;
width: 240px;
height: 120px;
animation: bgScrollLeft 5s linear infinite;
}
#keyframes bgScrollLeft {
from {
background-position: 0 0;
}
to {
background-position: -120px 0;
}
}
<div id="bg"></div>
I just implemented this on my own site after seeing your question. cool idea!
function animateBg(px=0){
requestAnimationFrame(()=>{
document.body.style.backgroundPosition = `${px}px 0px`;
animateBg(px+0.5);
});
}
animateBg();
It assumes you have a bg image set in CSS. Change the 0.5 to change the speed.
You are moving the element left, but in fact you should move your background position. Next to that with a while(1) loop it will run infinitly. So 2 task, create an animation frame to not run infinite. And change the background-position property.
var left = 0;
// You might want to add a time delta
function animate() {
requestAnimationFrame( animate );
document.getElementById("bgImg").style.backgroundPosition = '0 ' +left-- + 'px';
}
animate();
Note the code probably wont work, but gives you an idea of an solution.
Look into requestAnimationFrame to know what it does.
edit
Look at IronFlare solution, which is more beautiful with css.

CSS Spritesheet movement transition. Ease without sliding through the background image

It's somewhat hard to explain because it's a mouthful but I'll try to give you the context as best as I can.
I have a little character, facing north, south, east, and west, on a CSS sprite sheet. In my game. you can control his movements with WASD, causing him to visibly move X amount of pixels up, down, left, or right. Depending on that direction, the CSS sprite changes to accommodate accordingly so that he's always "facing" the direction he's travelling.
My problem is that I want to use the CSS transition property, but when I do so, it causes the movement I want however it scrolls through the CSS sprite, which I do not want.
My question is, what CSS property controls the pixel movement on the screen, because setting it to "All" transitions everything, including the background position which I do not want.
I have the following CSS code:
.player {
background: url(character.png) no-repeat top left;
width: 48px;
height: 48px;
position: absolute;
margin: 0;
z-index: 100;
transition: all .25s ease;
}
.player.playerFront {
background-position: 0 0;
}
.player.playerBack {
background-position: -48px 0;
}
.player.playerLeft {
background-position: -96px 0;
}
.player.playerRight {
background-position: -144px 0;
}
Javascript:
player.className = 'player playerRight';
player.style.left = parseInt(player.style.left) + 48 + 'px'; // Example of the JS when the player moves right
I've tried a variety of possibilities... none of which have worked. Everything on StackOverflow and online only talk about animation or hover effects and don't apply to my specific problem.
The reason you don't see a smooth transition in movement is that your JS is moving the character in 48px increments. When you set a style like that directly in JS, you won't see it animate because it sets it to the new value immediately - even if you put a transition property on it.
Edit:
If you only want to transition the position and not the background-position, you'd do it like this:
transition-property: top, bottom, left, right;
transition-duration: 0.25s;
transition-timing-function: ease;
That said, it still won't have an effect if you're using JS to set the style. When you set style.left += 48px, it's going to move that 48px all in one go.
Alternatively, you might have an issue with how your spritesheet is set up. Make sure each "sprite area" (ie, each segment of the sheet that might be visible at once) has the sprite centered in it, not against any of the edges. (It might be helpful to make a codepen showing what you've got, if you want more detailed answers.)

Maintaining Aspect Ratio with 100% Width & Height (Cropping Overflow in CSS)

I'm working on full-screen background slideshow.
My question is: How can I set an image to take up the full screen and maintain aspect ratio?
Min-height and min-width work, but do not keep the aspect ratio when both are set. I want the image cropped with the full coverage of the container.
Diagram of Problem
I believe I need to have one dimension fixed, and the other to auto; given that the image dimensions and view-port dimensions are variable, I'm thinking I would need at least 2 sets of CSS rules, and javascript to calculate which one should be used. Is there a simpler way to do this?
I've drawn up a diagram illustrating my problem. The dark colors are the original images. The median colors are the desired effect. The lighter colors are the desired overflow from the scaled up image.
I'm working on a Ken-Burns effect full-screen background. I know I have to worry about transitions, but I'm hoping that I can handle that after.
Tutorial for Ken Burns Effect:
http://cssmojo.com/ken-burns-effect/
Solved: Thanks Maju for introducing me to background cover. Changing the images to divs and changing the javascript + css on the Ken Burns code from images to divs worked well. The script changes the element class, so you have to use Maju's CSS another way or change the script.
If you will use images in css background-image, you can set on any element background-size. And if I understand you right, you need something like:
.background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-repeat: no-repeat !important;
background-position: 0 0 !important;
background-attachment: fixed !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
}
<div class="background" style="background-image: url(http://www.jurosko.cz/images/stackoverflow.png)"></div>
Cover will affect image in the way that it will always cover the whole element with right aspect ratio.
There is also new css style, but it doesn't work in IE/ME.
https://css-tricks.com/almanac/properties/o/object-fit/
For this reason I recommend to use divs with background-image.

Background-image fade into another through background-position

Snippet of code: https://jsfiddle.net/foy4m43j/
HTML:
<div id="background"></div>
CSS:
#background {
background-image: url("http://i.imgur.com/hH9IWA0.png");
background-position: 0 0;
background-repeat: repeat;
height: 100%;
width: 100%;
position: fixed;
}
From here, I'd like to produce this sort of effect using it's background-position to include a fade and the new colour (black lines to show the direction we're moving):
Example images (please excuse the bad exports):
Is this possible through jQuery or CSS? I'm scratching my head on how I can do this with background-position and multiple images.
This is my awful attempt so far. I don't understand why the gradient is going the other direction and I'm not sure how to make the yellow repeat itself to the right X axis only:
https://jsfiddle.net/foy4m43j/1/
I hope I'm clear enough. I can't find any other questions similar apart from one that had no response.
You can use CSS gradient. By far the best solution, and it is easy to make:
www.colorzilla.com

Making some kind of see-through glass image in css/html/js

When viewing this website: http://myankle.co.uk/faq/
Whenever you scroll down or up, the image of the ankle changes. I know that you can make a div opaque and put an image behind it, but how is this effect being done? The image seems to move with the page.
This is achieved by setting a background as background-attachment: fixed. The effect is a basic implementation of parallax.
A good article to get you started is http://davidwalsh.name/parallax
An example class to apply this would be:
.parallax {
background-image: url('http://demoimage.com/image.jpg');
background-color: none !important;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed; // For mobile this should be scroll to fix bugs with ios
overflow-y: hidden;
}
You add a background-image to body that is position: fixed; and then make html content on top of it transparent, so you can see the background-image. It's not moving with the page, that is an illusion.
That element uses a background-attachment CSS property to fix the image relative to the screen:
If a background-image is specified, the background-attachment CSS property determines whether that image's position is fixed within the viewport, or scrolls along with its containing block.
elem {
background-attachment: fixed;
}
JSFiddle demo.

Categories