How to Progressively highlight a chunk of text using jquery/js/css - javascript

The effect can be seen live at Webdesignerdepot.com . When you hover over the title of a post the title highlights progressively also when you remove the cursor from the title before the animation is complete the highlight rolls back to its original state.
I tried animating the background color, but the problem that I faced was background color extended the whole div even when text didn't completely filled the div.
I have been thinking of adding an extra div with a z-index less than that of the text and then animating its width, but it would fail since text can extend more than one line. If the resulting effect is to be achieved with the same process it will result in multiple divs making the program really complex.
I couldn't think of any other way of achieving this.
Any other workarounds/techniques I can use?

Use javascript console or firebug or something like that and it's really easy to get a website styles.
CSS
a {
background-size: 200.22% auto;
-webkit-background-size: 200.22% auto;
-moz-background-size: 200.22% auto;
background-position: -0% 0;
background-image: linear-gradient(to right, rgba(255,255,255,0) 50%, #ddd 50%);
transition: background-position 0.5s ease-out;
-webkit-transition: background-position 0.5s ease-out;
}
a:hover {
background-position: -99.99% 0;
}
HTML
<a>something</a>

Related

Using CSS Animations to keep element hidden for n seconds after page load

A few years back we added a note to our web page for users who are blocking JS. I would really like the note to stay hidden for folks who have JS on. The note's visibility relies on the body having a class body class="noJS". In order to remove that as swiftly as possible I have a JS as the very first item in the body tag that does not rely on anything but fires right away.
<!-- BODY element exists! -->
<script type="text/javascript">
/*<![CDATA[*/
document.body.className = document.body.className.replace(new RegExp(\'(?:^|\\s)\'+ \'no-js\' + \'(?:\\s|$)\'), \' \');
/*]]>*/
</script>
In Firefox I still see the note as a red flickering, for example on the top of the main page here https://www.colorperfect.com
Annoying, which leads to my question can I use CSS3 animations to fade in that note say after a one second delay? That should fix it I guess but I have never done anything with CSS animations so I figured I'd ask rather than fiddle... If that does not work other ideas would be welcome, too.
Edit:
This is the CSS that produces the red block. A simple matter of exchaning background and height.
body.noJS .single_navi_zeile
{
background-color:#BB0000;
height:12.7em;
background-position: left 0.5em bottom 0.3em;
background-repeat: no-repeat;
background-image: url("../grafik/nojs.png");
}
This should provide you the fade in effect you are after. Animation delays postpone when an animation starts and so you might end up with the element appearing, then vanishing suddenly only to fade back in again.
If you begin the animation right away but start from opacity: 0 and then after 1s (50% of a 2s duration) fade it back in you should get what you're after.
#keyframes fade-in {
0% {opacity: 0}
50% {opacity: 0}
100% {opacity: 1}
}
.anim-fade-in {
animation-name: fade-in;
animation-duration: 2s;
}
<p class="anim-fade-in">Some content</p>
Worth noting that the element is only hidden using opacity by this approach and so you may find that the page content moves as the element itself is present before being removed. You could experiment with sliding the element in instead.
did you try css for that?
.redBanner {
display: none;
}
body.no-js .redBanner {
display: block;
}
or with your example
body.no-js .single_navi_zeile {
background-color:#BB0000;
height:12.7em;
background-position: left 0.5em bottom 0.3em;
background-repeat: no-repeat;
background-image: url("../grafik/nojs.png");
}

How to resize background image with CSS/JS

I have fullscreen website with background-image: no-repeat and background-size: cover style on it. I want to make animation that the background image will resize in 10 second to the right side of the page to 350px width and 175px height. It's even possible to do it?
body {
background-image: url(/image.png);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
position: fixed;
}
I saw some webkit animation but there was problem with the background-size: cover style, so the animation doesn't work.
I tried :
$(function(){
$('body').one("mouseover", function() {
$('body').addClass('hover');
});
});
But it will resize the image instantly and move it to the right, I want to resize them linear.
Thank you very much guys! :-)
You could add something like this to your css:
body {
background-position: center center;
transition: background-size 10s ease-in-out, background-position 10s ease-in-out;
}
body.hover {
background-size: 350px 170px;
background-position: right center;
}
https://codepen.io/anon/pen/oPbqPm
The problem with this, is however, that it won't animate the sizing.
I would suggest you don't set the image as background. Instead, position the image behind all other elements using position and z-index properties. Once set, you can add the animation. For more details on using z-index and position attributes see the link below and "try it yourself" example:-
https://www.w3schools.com/cssref/pr_pos_z-index.aspenter link description here
You can then use css animation for resizing of the imgae.
TO learn how to add animation see this link:-
https://www.w3schools.com/css/css3_animations.asp

Animate multiple background image in one div

I need a smart/tough guy to help me with my issue right now.. please check div that set css multiple background image ... in that image I set the background of a div in a gradient color while I called other background images that looks polygonal, and the css is something like this:
.at{
height: 650px;
padding-top: 130px;
background-image: url(../../../img/2nd_element.png),
url(../../../img/1st_element.png),
url(../../../img/3rd_element.png),
url(../../../img/4th_element.png),
linear-gradient(to bottom, #017a92 0%,#91d2c1 100%);
background-position: 3em 60px, left bottom, 70% -90px, right top, left bottom;
background-repeat: no-repeat, no-repeat, no-repeat;
}
I needed to animate these different background images with offset(and it depends on the scrolling page that if this content is centered).
for example: bg-image1 = will appear after 3s, bg-image2 = will appear after 4s, bg-image3 = will appear after 5s.. then etc etc... until the polygonal background images completed.
I'm not sure if this can be done by jQuery or javascript or css3 animation or svg animation but I think you get my point sir! thanks for helping! looking forward to donate who can help me with this! thank you!

How can I prevent the stutter that occurs while transitioning background-image?

I am using background-size: cover; transition: background-image 4s; on an element and I have written some JS that changes the background-image property every 10 seconds.
The element transitions the background image in webkit browsers but the image shakes while transitioning.
How can I prevent that?
Here is a JSFiddle with an example of the behavior:
http://jsfiddle.net/michaelynch/x60gL1p6/
Instead of using background-size: cover;, use in % like background-size: 100% 190%;

CSS3 Multiple Transitions of the Same Element

I am trying to make a dropdown effect for one of my background images. I was able to do it using css3 but it's not complete.
The effect is supposed to be a curtain that drops down then sort of bounces back up a little. The problem with css3 is that I don't know how to do to transitions on the same property because the last one overrides the previous ones.
Here's my code:
ul#nav li a {
/* ADDS THE DROPDOWN CURTAIN TO THE LINKS BUT HIDDEN OFF SCREEN */
background: url(images/drape2.png) 0px -149px no-repeat;
/* CSS3 transitions */
-moz-transition: all 200ms ease-in-out;
-webkit-transition: all 200ms ease-in-out;
}
ul#nav li a:hover {
/* Action to do when user hovers over links */
background-position: 0px 0px; /* make drape appear, POOF! */
background-position: 0px -10px; /* make drape appear, POOF! */
}
Any help would be much appreciated.
You'll want to chain them with commas instead of a new line
For instance:
background-color 500ms linear, color 500ms linear;
Using cubic-bezier like this:
cubic-bezier(0, 0.35, .5, 1.3)
You can make an animation go backwards—or bounce a little.
Demo (Only works in Firefox)
Source
Edit: I also made you a Webkit only option, I don't know how compatible these two techniques are. It may also work in Firefox with the -moz browser prefixes, but I haven't tested it. This one uses keyframe animation as opposed to transitions.

Categories

Resources