I want to show the text text masking effect with animation
Here is my fiddle for what I am trying to achieve: http://jsfiddle.net/qTWTH/2/
I am not able to position the Red text in "center" above theblack text so the efffect should be something like this: http://jsfiddle.net/qTWTH/1/ *BUT aligned Center*
Also how to repeat the animation, this as per the JS, it just animate only once, I want to repeat the JS once the effect is done.
Code: HTML
<div id="mainbox">
<span id="black">Waiting for the task!</span>
<span id="red">Waiting for the task!</span>
</div>
CSS
#mainbox {
width:600px;
text-align:center;
}
#black {
color:black;
font-weight:bold;
font-size:2em;
}
#red {
position:absolute;
z-index:10;
left:8px;
width:0px;
overflow:hidden;
font-weight:bold;
font-size:2em;
color:red;
white-space:nowrap;
}
JS
var red = document.getElementById('red');
var black = document.getElementById('black');
red.style.width = "0px";
var animation = setInterval(function () {
console.log(red.style.width);
if (red.style.width == "290px") clearInterval(animation);
red.style.width = parseInt(red.style.width, 10) + 1 + "px";
}, 50);
Let me know if you need any other information.
Please suggest.
Check this fiddle
By centering the div itself, and positioning the red according to that, you'll ensure they line up.
#mainbox {
display: inline-block;
position: relative;
}
html {
text-align: center;
}
#red {
left: 0;
}
To run it again and again change like this:
var red = document.getElementById('red');
var black = document.getElementById('black');
red.style.width = "0px";
var animation = setInterval(function(){
console.log(red.style.width);
if(red.style.width == "290px")
{
red.style.width = "0px"; // here i have changed
}
red.style.width = parseInt(red.style.width,10)+1 +"px";},50);
Correct fiddle: http://jsfiddle.net/arjun_chaudhary/qTWTH/22/
I altered your code slightly, you almost had it
http://codepen.io/nighrage/pen/EAmeF/
<div id="mainbox">
<span id="black">Waiting for the task!</span>
<div id="red">Waiting for the task!</div>
</div>
#red {
z-index:10;
left:8px;
width:0px;
overflow:hidden;
font-weight:bold;
font-size:2em;
color:red;
white-space:nowrap;
margin: 0 auto;
margin-top: -37px;
}
change the second span for a div
Related
I am trying to make a div which blinks a certain colour at a time interval , which has a border that blinks at a different time interval.
$(document).ready(function() {
var promo = document.getElementById('blink');
var extraBlink = document.getElementById('extraBlink');
setInterval(function() {
promo.style.display = (promo.style.display == 'none' ? '' : 'none');
}, 1000);
setInterval(function() {
extraBlink.style.display = (extraBlink.style.display == 'none' ? '' : 'none');
}, 500);
});
#border {
border-style: solid;
border-color: rgb(61, 243, 61);
border-width: 10px;
}
#promotion {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background: rgb(170, 7, 7);
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="blink">
<div id="extraBlink">
<div id="border">
<footer id="promotion"> Half Price Today! </footer>
</div>
</div>
</div>
I can only manage to make it blink one colour instead of blinking two colours at the same time.
Since you are using JQuery, you should use it to get references to the elements in question as well as for toggling the styles (instead of setting the styles inline, set up classes that can simply be toggled).
Also, if I understand you correctly, you don't need all that HTML. You really just need the footer and a container element.
Lastly, your CSS needs to be more disbursed between the elements to create the right effect.
$(document).ready(function() {
// Your already using JQuery so also use it to get the DOM references
var $promo = $('#promotion');
var $border = $('#border');
setInterval(function() {
$promo.toggleClass("hidden"); // Toggles the show/hide aspect every 1.5 seconds
}, 1000);
setInterval(function() {
$border.toggleClass("border"); // Toggles the border every .5 seconds
}, 1000);
});
/* The container gets positioned and the child content will go for the ride. */
body {
margin:0;
}
#border {
box-sizing:border-box;
position:absolute;
bottom:0;
width:100%;
height:60px;
text-align:center;
}
#promotion {
box-sizing:border-box;
background:rgb(170, 7, 7);
width:calc(100% - 20px);
height:60px;
margin:10px;
}
.border {
border:10px solid rgb(61, 243, 61);
}
.hidden { visibility:hidden; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="border">
<footer id="promotion"> Half Price Today! </footer>
</div>
The issue with your code is that once you hide the child the parent has no content and thus loses its background and when you hide the parent the child disappears too. You might be able to achieve this with visibility but when you hide the parent it will still hide the child but at least the reserved space when rendering does not disappear thus not jerking all around the surrounding text/html
I modified your code to use plain javascript as an alternative to jQuery class swapping highlighted by Scott Marcus.
self.onload = function(){
var promo = document.getElementById('blink');
var extraBlink = document.getElementById('extraBlink');
setInterval(function() {
promo.style.backgroundColor = promo.style.backgroundColor=="yellow"?"magenta":"yellow";
}, 1000);
setInterval(function() {
extraBlink.style.backgroundColor = extraBlink.style.backgroundColor=="red"?"blue":"red";
}, 500);
};
#blink{
border-style: solid;
padding:10px;
}
#extraBlink{
border-style: solid;
padding:10px;
}
.promotion {
width:100%;
height:60px;
text-align:center;
}
<div id="blink">
<div id="extraBlink">
<div id="border">
<footer class="promotion"> Half Price Today! </footer>
</div>
</div>
</div>
function toggle(){
var button=document.querySelector('.toggle');
var bar=document.querySelector('.slide');
if(bar.className==='slide up'){
bar.className='slide down';
}else{
bar.className='slide up';
}
}
*{
margin:0px;
padding:0px;
height:100%;
width:100%;
}
.box{
overflow:hidden;
background-image: url('http://tombricker.smugmug.com/Travel/San-Francisco-California/i-jk2Z7D7/0/L/san-francisco-golden-gate-bridge-morning-sun-bricker-L.jpg');
background-size: cover;
background-position:center;
}
.slide{
position: relative;
left:39vw;
width: 55vw;
height: 75vh;
background: red;
}
.slide:before {
content: '';
position:absolute;
top:-3vh;
width: 0px;
height: 0px;
border-left:27.5vw solid transparent;
border-right:27.5vw solid transparent;
border-bottom:3vh solid white;
}
.slide.down{
transform:translateY(100vh);
}
.slide.up{
transform:translateY(25vh);
}
.slide{
transition:transform 0.4s ease-out;
}
<div class='box'>
<div class='slide up' onclick='toggle()'></div>
</div>
The white triangle on top of the red rectangle is made with pseudo element :before. What I am trying to do is when the sliding tag is up, the white triangle should be pointing down. To do that, I want to write a JS code that will add a transform CSS to that class with pseudo element that will translate triangle down by its height and rotate by 180deg.
I find on this developer blog the JS code to add, but it does not work and I don't know how to delete that code when the tag is down.
function toggle(){
var button=document.querySelector('.toggle');
var bar=document.querySelector('.slide');
if(bar.className==='slide up'){
bar.className='slide down';
//Here is where I need to add the line to delete CSS
}else{
bar.className='slide up';
//This is to add CSS
//3vh is the height of that white triangle
document.styleSheets[0].addRule('.slight:before','transform:translateY(3vh) rotateX(180deg)');
}
}
You can add the transformation to the CSS class, and simply toggle it.
CSS
.slide.up:before {
transform: translateY(3vh) rotateX(180deg);
}
JS
var bar = document.querySelector('.slide')
function toggle() {
var cl = bar.classList
cl.toggle('down', cl.contains('up'))
cl.toggle('up', !cl.contains('down'))
}
JSFiddle demo: https://jsfiddle.net/htq8ouyn/2/
Resources
Element.classList - Web APIs | MDN
This question already has answers here:
Custom Cursor using CSS styling - html/css - javascript
(2 answers)
Closed 3 years ago.
I want to add a image as my cursor inside a div, But i want it to hide and have a normal pointer cursor, when the mouse hovers over any of the link inside that div.
I wrote :
var $box = $(".box");
var $myCursor = $("#myCursor");
var button1 = $("#link1");
var button2 = $("#link2");
$box.on("mouseleave",function(){
$myCursor.hide();
})
$box.mousemove(function(e){
$myCursor.css('top',e.pageY);
$myCursor.css('left',e.pageX);
if (!button1.is(":hover") && (!button2.is(":hover"))){
$myCursor.show();
}
else if(button1.is(":hover") || (button2).is(":hover")){
$myCursor.hide();
}
if(e.clientX<$box.width()*0.5){
$myCursor.css('transition','transform 1s');
$myCursor.css('transform','rotate(-270deg)');
}
else if(e.clientX>$box.width()*0.5){
$myCursor.css('transition','transform 1s');
$myCursor.css('transform','none');
}
});
.box{
height:100vh;
background:#ccc;
padding-top:50px;
cursor:none;
}
button{
display:block;
margin:15px auto;
width:20%;
padding:10px;
cursor:pointer;
}
#myCursor{
position:absolute;
height:50px;
width:50px;
top:0;
left:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "box">
<button id = "link1">Some link</button>
<button id = "link2">Another Link</button>
<img id = "myCursor" src = "https://cdn3.iconfinder.com/data/icons/ahasoft-war/512/sniper_rifle-512.png">
</div>
How do i implement this properly?
Thanks
Much easier to achieve using CSS only. You will have to resize the cursor image beforehand, in this example I resized one to 50x50 pixels (the other in the white box is 64x64).
The , auto is mandatory and defines a fallback.
.box{
height:100vh;
background:#ccc;
padding-top:50px;
cursor: url(//codestylers.de/rifle.png), auto;
}
button{
display:block;
margin:15px auto;
width:20%;
padding:10px;
cursor: pointer;
}
.another-cursor {
background-color: white;
width: 300px;
height: 200px;
cursor: url(//codestylers.de/cursor.png), auto;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "box">
<button id = "link1">Some link</button>
<button id = "link2">Another Link</button>
<div class="another-cursor"></div>
</div>
The simple solution is just to adjust the scoping of your selectors:
var $box = $(".box:not(button)"); so the image switch is called whenever the cursor is not over a button. However in your case you should consider reducing the image size so it's closer to the mouse size - as there's a large overlap of image and button before the mouse pointer itself covers the button.
a more complex solution would involve using arrays to register the button coordinates and dimensions, then using mousemove and each to constantly check the image coordinate widths against the stored buttons dimensions but depending on what else you've got going on there could be a performance hit.
If you add pointer-events: none to the #myCursor css you prevent the occasional momentary obscuration of the cursor from the button by the image itself - hence better performance.
var $box = $(".box:not(button)");
var $myCursor = $("#myCursor");
var button1 = $("#link1");
var button2 = $("#link2");
$box.on({
mouseleave:function(){
$myCursor.hide();
},
mousemove: function(e){
$myCursor.css({ 'left':e.pageX, 'top':e.pageY });
if (!button1.is(":hover") && !button2.is(":hover")){
$myCursor.show();
} else if(button1.is(":hover") || (button2).is(":hover")){
$myCursor.hide();
}
}
});
.box{
height:100vh;
background:#ccc;
padding-top:50px;
cursor:none;
}
button{
display:block;
margin:15px auto;
width:20%;
padding:10px;
cursor:pointer;
}
#myCursor{
position:absolute;
height:50px;
width:50px;
top:0;
left:0;
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "box">
<button id = "link1">Some link</button>
<button id = "link2">Another Link</button>
<img id = "myCursor" src = "https://cdn3.iconfinder.com/data/icons/ahasoft-war/512/sniper_rifle-512.png">
</div>
You can solve this using CSS, there is no need for javascript.
Have a look here:
http://www.w3schools.com/cssref/pr_class_cursor.asp
You might set CSS classes with help of javascript to enable some sort of dependency to other elements.
I have a page which i need to dim a certain area (div) instead of the entire page. How can I achieve this?
I have googled some answer but all of them is about dimming the whole page. Below is the sample code that I got but it dimmed the entire page.
<div id="dimmer"></div>
#dimmer
{
background:#000;
opacity:0.5;
position:fixed; /* important to use fixed, not absolute */
top:0;
left:0;
width:100%;
height:100%;
display:none;
z-index:9999; /* may not be necessary */
}
It covered the whole page because you set the width and height to 100%. If you were to make it 100px or 50%, that would work, but if you set it to 100%, it will cover 100% of the page.
.area-to-dim {
position: relative;
}
.dimmer {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
}
HTML
<div class="area-to-dim">
<div class="dimmer"></div>
</div>
Two ways, one really simple but I'm not 100% sure this is what you wanted.
First way, use CSS
.genericClassGivenToDivs, #idOfDiv {
background:#fff;
}
/* on mouse over, change the background colour */
.genericClassGivenToDivs:hover, #idOfDiv:hover {
background:#aaa;
}
The second way is more complex. Basically, reposition a div using javascript on mouse over. This requires some CSS and javascript. The following could be a lot cleaner with some work.
<html>
<head>
<style>
body {
margin:1em;
background:#ddd;
}
#contain {
margin:auto;
width:100%;
max-width:720px;
text-align:center;
}
#row1, #row2, #row3 {
width:100%;
height:48px;
line-height:48px;
color:#000;
background:#fff;
}
#row2 {
background:#eee;
}
#dim {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
display:none;
}
</style>
</head>
<body>
<div id="contain">
<div id="row1">Row 1</div>
<div id="row2">Row 2</div>
<div id="row3">Row 3</div>
</div>
<div id="dim"></div>
<script>
var dimEl = document.getElementById('dim');
function over() {
//console.log('over:['+ this.id +']');
dimEl.style.top = this.offsetTop +'px';
dimEl.style.left = this.offsetLeft +'px';
dimEl.style.height = this.offsetHeight +'px';
dimEl.style.width = this.offsetWidth +'px';
dimEl.style.display = 'block';
}
window.onload = function() {
var list = ['row1', 'row2', 'row3'];
var e;
for(x in list) {
e = document.getElementById(list[x]);
if (e) {
e.onmouseover = over;
}
}
}
</script>
</body>
</html>
Not entirely sure what "dimming a certain area" means, but I recently created a solution that might be applicable in some extent.
I had a div with a background image and some overlaid text, and the background (but not the text) should darken slightly on mouse over.
I solved it by having two containers and a textfield, so that the outermost div had the background image, the inner div expanded to 100% height and width and had a transparent black solid-color background, and then there was some text in that div.
Then, simply, on hover, I change the inner div background-color from rgba(0, 0, 0, 0) to rgba(0, 0, 0, .3), dimming the background image.
If this sounds applicable, see this jsFiddle
Why the display is none?
Check this?
#dimmer {
background: #111;
top: 0;
left: 0;
width: 100px;
height: 100px;
z-index: 9999;
/* may not be necessary */
}
#dimmer:hover {
background: #000;
opacity: 0.5;
transition: opacity 1s ease;
cursor: pointer;
}
<div id="dimmer">ok</div>
I found the following on codepen and really liked this effect. Now I'm trying to adapt this to my needs and ran into some problems:
Whenever a user scrolls down or is resizing his screen, the image is behaving weird (I can't describe it in my own words, see jsfiddle for what I mean).
I guess this problem might relate to the 'background-attachment: fixed' property.
See:
.image {
width:100%;
height:100%;
position:absolute;
bottom:0;
background:url("http://lorempixel.com/400/200/") fixed top center no-repeat;
background-clip:content-box;
opacity: 0.4;
filter: alpha(opacity=40);
}
.show {
width:100%;
height:100%;
position:absolute;
bottom:0;
background:url("http://lorempixel.com/400/200/") fixed top center no-repeat;
background-clip:content-box;
}
I tried to experiment with both, the position of the div and the background-attachment property, but I didn't get a decent result. You can see my updated fiddles for that (Rev.: 2-4).
Does one of you have an idea of how I can use this effect without the shown weird behaviours?
Maybe there's some jQuery magic with whose help I can achieve this effect?
It would be best if the solution also supports the IE 8, but it's not a must at this point, as I only want to understand what I did wrong.
Thanks in advance.
The problem is that author used fixed background attachment, without it the script is more complex.
If I get it right you want to control the position by clicking the buttons.
I created a snippet that will give you a good starting point: JSnippet
As you can see things are more complex there but it does not uses fixed background and allows you to easily update the "loading" to any point you want, I have not tested it but it should work on most of the browsers and even older once.
You can set all you need using attributes:
data-loader-size -> sets the size.
data-back-image -> sets the back image.
data-front-image -> sets the front image.
data-update-to -> For the controls set the percentage you want.
The CSS:
div.loader {
position:relative;
background-repeat:no-repeat;
background-attachment: scroll;
background-clip:content-box;
background-position:0 0;
margin:0;
padding:0;
}
div.loader .loaded {
position:absolute;
top:0;
left:0;
background-repeat:no-repeat;
background-attachment: scroll;
background-clip:content-box;
background-position:0 0;
margin:0;
padding:0;
}
div.loader .position {
position:absolute;
left:0;
border-top:1px dashed black;
width: 100%;
text-align:center;
margin:0;
padding:0;
min-height: 40px;
}
div.loader .position div {
font-family: 'Concert One';
background:#2f574b;
width: 25%;
margin:0;
padding:5px;
margin: 0 auto;
text-align:center;
border-radius: 0 0 4px 4px;
border-bottom: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
color:white;
}
The HTML:
<div class="loader"
data-loader-size="450px 330px"
data-back-image="http://fdfranklin.com/usf-bull-bw.png"
data-front-image="http://fdfranklin.com/usf-bull.png"
>
<div class="loaded"></div>
<div class="position"><div>0%</div></div>
</div>
<br><br>
<div>
<button class="set-loader" data-update-to="0">Set 0%</button>
<button class="set-loader" data-update-to="25">Set 25%</button>
<button class="set-loader" data-update-to="50">Set 50%</button>
<button class="set-loader" data-update-to="100">Set 100%</button>
</div>
The jQuery:
$(function() {
var loader_class = ".loader",
control_class= ".set-loader";
var oLoader = {
interval : 10,
timer : null,
upPerc : 0,
upHeight : 0,
curHeight : 0,
step : 1,
diff_bg : 0,
diff_top : 0,
size : $(loader_class).data("loader-size").split(" "),
heightInt : 0,
bimage : $(loader_class).data("back-image"),
fimage : $(loader_class).data("front-image"),
loader : $(loader_class).children('.loaded').eq(0),
position : $(loader_class).children('.position').eq(0),
pos_height : 0
};
oLoader.heightInt = parseInt(oLoader.size[1],10);
oLoader.pos_height = parseInt($(oLoader.position).height(),10);
$(loader_class).css({
width: oLoader.size[0],
height: oLoader.size[1],
'background-image':'url(' + oLoader.fimage + ')',
'background-size':oLoader.size.join(' ')
});
$(oLoader.loader).css({
width: oLoader.size[0],
height: oLoader.size[1],
'background-image':'url(' + oLoader.bimage + ')',
'background-size':oLoader.size.join(' ')
});
$(oLoader.position).css({
bottom: 0 - oLoader.pos_height
});
$(control_class).each(function(){
$(this).click(function(){
clearInterval(oLoader.timer);
oLoader.upPerc = parseInt($(this).data('update-to'));
oLoader.upHeight = Math.ceil((oLoader.upPerc/100)*oLoader.heightInt);
oLoader.upHeight = (oLoader.upHeight>oLoader.heightInt?oLoader.heightInt:oLoader.upHeight);
oLoader.curHeight = parseInt($(oLoader.loader).height(),10);
oLoader.step = (oLoader.upHeight>(oLoader.heightInt - oLoader.curHeight)?-1:1);
oLoader.diff_bg = (oLoader.step === 1?
(oLoader.heightInt - oLoader.curHeight) - oLoader.upHeight:
oLoader.upHeight - (oLoader.heightInt - oLoader.curHeight));
oLoader.diff_top = parseInt($(oLoader.position).css('bottom'),10);
oLoader.timer = setInterval(function () {
if (oLoader.diff_bg) {
oLoader.diff_bg--;
oLoader.curHeight += oLoader.step;
oLoader.diff_top += -oLoader.step;
oLoader.calc_perc = Math.ceil((oLoader.diff_top + oLoader.pos_height) / oLoader.heightInt * 100);
oLoader.calc_perc = (oLoader.calc_perc < 0?0:oLoader.calc_perc);
oLoader.calc_perc = (oLoader.calc_perc > 100?100:oLoader.calc_perc);
$(oLoader.loader).css({ height: oLoader.curHeight });
$(oLoader.position).css({ bottom: oLoader.diff_top });
$(oLoader.position).children('div').text(oLoader.calc_perc + "%");
} else {
clearInterval(oLoader.timer);
$(oLoader.position).children('div').text(oLoader.upPerc + "%");
}
}, oLoader.interval);
});
});
});