I created the circle with css and html and I want to have it repeat across the x-dimension of the browser (trying to replicate the image shown below). I know there's background-image: x-repeat, but this isn't a background image, so I cant use that and there will also be content inside the circle. I was originally trying to create 9 circles, then absolutely position them, but I realized that it may not be the best way and won't work if the browser shrinks. Then remembered the repeat-x property. Here's my code of my original line of thinking:
HTML Code
<div class="circles">
<div id="half-circle1"></div>
<div id="circle1"></div>
<div id="circle2"></div>
<div id="circle3"></div>
<div id="circle4"></div>
<div id="circle5"></div>
<div id="circle6"></div>
<div id="circle7"></div>
<div id="half-circle2"></div>
</div><!-- end of circles -->
CSS Code
.circles div { width: 199px; height: 199px; background-color: #60c5ca; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; position: absolute; top: 0; left: 0; }
#half-circle1 { top: 255px; left: 0px;; width: 100px; border-radius:0 100px 100px 0; opacity: 0.6;}
#half-circle2 { top: 0; left: 0; width: 100px; border-radius: 100px 0 0 100px; opacity: 0.6; }
#circle1 { top: 235px; left: 50px; opacity: 0.5; }
#circle2 { top: 285px; left: 200px; opacity: 0.6; }
#circle3 { top: 235px; left: 300px; opacity: }
#circle4 { top: 235px; left: 300px; opacity: }
#circle5 { top: 235px; left: 300px; opacity: }
#circle6 { top: 235px; left: 300px; opacity: }
#circle7 { top: 235px; left: 300px; opacity: }
You can utilize css calc() with vw, vh units
.circles div {
width: 199px;
height: 199px;
background-color: #60c5ca;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
position: absolute;
top: 0;
left: 0;
}
#half-circle1 {
top: 255px;
left: calc(0vw);
width: 100px;
border-radius: 0 100px 100px 0;
opacity: 0.6;
}
#half-circle2 {
top: 235px;
left: calc(90vw + 50px);
width: 100px;
border-radius: 100px 0 0 100px;
opacity: 0.6;
}
#circle1 {
top: 235px;
left: calc(10vw - 50px);
opacity: 0.5;
}
#circle2 {
top: 285px;
left: calc(20vw);
opacity: 0.6;
}
#circle3 {
top: 235px;
left: calc(30vw);
opacity: 0.7;
}
#circle4 {
top: 235px;
left: calc(40vw);
opacity: 0.5;
}
#circle5 {
top: 235px;
left: calc(50vw);
opacity: 0.5;
}
#circle6 {
top: 235px;
left: calc(60vw + 50px);
opacity: 0.6;
}
#circle7 {
top: 235px;
left: calc(70vw + 100px);
opacity: 0.7;
}
<div class="circles">
<div id="half-circle1"></div>
<div id="circle1"></div>
<div id="circle2"></div>
<div id="circle3"></div>
<div id="circle4"></div>
<div id="circle5"></div>
<div id="circle6"></div>
<div id="circle7"></div>
<div id="half-circle2"></div>
</div>
jsfiddle https://jsfiddle.net/Lu1xwkre/1/
Related
wanting to create a hover function transition and then a click function that transitions to a cross which has to be clicked to transition back (custom hamburger menu)... If you can help at all thank you!
$("#wrapper").hover(function() {
$(".menu").toggleClass("transition");
});
$("#wrapper").click(function() {
$(".transition").toggleClass("close");
});
.main-item {
width: 30px;
height: 30px;
position: relative;
cursor: pointer;
}
.line {
position: absolute;
height: 2px;
width: 100%;
background: white;
border-radius: 2px;
transition: all cubic-bezier(0.25, 0.1, 0.28, 1.54) 0.32s;
background: black;
}
.line01 {
top: 33.3%;
width: 100%;
left: 0;
}
.line02 {
top: 66.6%;
width: 65%;
right: 0;
}
.menu.transition .line01 {
width: 65%;
}
.menu.transition .line02 {
width: 100%;
top: 66%;
}
.transition.close .line01 {
transform: rotate(45deg);
top: 49%;
width: 100%;
}
.transition.close .line02 {
transform: rotate(-45deg);
top: 49%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="main-item menu">
<span class="line line01"></span>
<span class="line line02"></span>
</div>
</div>
I am trying to add Fill animation from bottom to top of the box .box-inner-1 but CSS Rotate is not working properly!
$('.box-inner-1').css({
top: '0'
}).animate({
"height": 260
}, 4000);
.wrapper {
position: relative;
height: 260px;
width: 260px;
padding: 0px !important;
background: #ddd;
}
.box-inner-1 {
position: absolute;
height: 0px;
left: 0;
right: 0;
background-color: greenyellow;
-ms-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="box-inner-1"></div>
</div>
You can get the box to animate from the bottom to top by changing top: '0' to bottom: '0'.
$('.box-inner-1').css({
bottom: '0'
}).animate({
"height": 260
}, 4000);
.wrapper {
position: relative;
height: 260px;
width: 260px;
padding: 0px !important;
background: #ddd;
}
.box-inner-1 {
position: absolute;
height: 0px;
left: 0;
right: 0;
background-color: greenyellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="box-inner-1"></div>
</div>
Check transform-origin : center
In fact it is rotated, but right from the beginning - see my snippet, where I added some content to that DIV which is displayed upside down. Not sure what you expact - the rotation isn't animated, in case you expacted that - you don't set that anywhere (?)
$('.box-inner-1').css({
top: '0'
}).animate({
"height": 260
}, 4000);
.wrapper {
position: relative;
height: 260px;
width: 260px;
padding: 0px !important;
background: #ddd;
}
.box-inner-1 {
position: absolute;
height: 0px;
left: 0;
right: 0;
background-color: greenyellow;
-ms-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="box-inner-1">look here</div>
</div>
I want to change my scrolltop value from 50px to something like lets say 1% of the user's screen. How could I possibly go about doing this. I was reading that a JS value can be a percentage, however it is not working for me. Here is a codepen I made to demonstrate the effect:
[link] (http://codepen.io/ericshio/pen/zBRbAY)
HTML:
<div class="filler"></div>
<img class="down-arrow" src="http://www.themainconcept.com/wp-content/uploads/2015/11/down-arrow-wht.png" alt="down arrow wht"/>
CSS:
.down-arrow {
position: fixed;
bottom: 1%;
left: 50%;
max-width: 3.5%;
min-width: 3.5%;
width: 3.5%;
box-shadow: none;
opacity: 0.6;
}
.down-arrow:hover {
opacity: 1;
}
.filler {
height: 10000px;
}
JS:
$(window).scroll(function() {
$(".down-arrow").css("opacity", 1 -
$(window).scrollTop() / 50);
});
Try This.
$(window).scroll(function() {
$(".down-arrow").css("opacity", 1 -
$(window).scrollTop() / $(document).height()*0.5);
});
try this
.down-arrow {
position: fixed;
bottom: 1%;
left: 50%;
max-width: 3.5%;
min-width: 3.5%;
width: 3.5%;
box-shadow: none;
opacity: 0.6;
}
.down-arrow:hover {
opacity: 1;
}
.filler {
height: 50%;
}
I'm guessing you're trying to fade out the arrow on scroll
$(window).scroll(function() {
$(".down-arrow").css("opacity", 1 - ($(window).scrollTop() / document.body.scrollHeight));
});
.down-arrow {
position: fixed;
bottom: 1%;
left: 50%;
max-width: 3.5%;
min-width: 3.5%;
width: 3.5%;
box-shadow: none;
opacity: 0.6;
}
.down-arrow:hover {
opacity: 1;
}
.filler {
height: 10000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filler"></div>
<a href="#introjump">
<img class="down-arrow" src="http://www.themainconcept.com/wp-content/uploads/2015/11/down-arrow-wht.png" alt="down arrow wht" />
</a>
I'm doing a site with a "hidden" image. I hide the image using a dark overlay, but now I want the cursor to see through the dark overlay.
An almost working example is here: https://jsfiddle.net/swx5x38j/
What I want to know is, how I make the light div look through the dark overlay div. Is this somehow possible, or should I go for different solution? And does some have a hint on such one?
The code follows here as well. First the CSS:
* {
margin: 0;
padding: 0;
}
#image {
background: url(https://placeimg.com/640/480/animals) center no-repeat;
width: 800px;
height: 600px;
}
#overlay {
opacity: 0.9;
background: #000;
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
}
#light {
opacity: 1;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
background: #fff;
}
The jquery is as follow
$(document).mousemove(function(event) {
$('#light').offset({
top: event.pageY - 50,
left: event.pageX - 50
});
});
And last the HTML
<div id="image"></div>
<div id="overlay"></div>
<div id="light"></div>
instead an overlay, you could use a box-shadow:
$(document).mousemove(function(event) {
$('#light').offset({
top: event.pageY - 50,
left: event.pageX - 50
});
});
* {
margin: 0;
padding: 0;
}
#image {
background: url(https://placeimg.com/640/480/animals) center no-repeat;
width: 800px;
height: 600px;
}
#light {
opacity: 1;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;box-shadow:0 0 0 3000px rgba(0,0,0,0.9);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image"></div>
<div id="light"></div>
You can create a fake image and calculate the offset of the background image like this:
CSS
* {
margin: 0;
padding: 0;
}
.image {
background: url(https://placeimg.com/640/480/animals) center no-repeat;
}
#image {
width: 800px;
height: 600px;
top:0px;
left:0px;
}
#overlay {
opacity: 0.9;
background: #000;
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
}
#fakeImage {
position:absolute;
width: 800px;
height: 600px;
}
#light {
opacity: 1;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
border-radius: 50%;
position: relative;
background: #fff;
overflow:hidden;
}
HTML
<div id="image" class="image"></div>
<div id="overlay"></div>
<div id="light" style="display:none;">
<div id="fakeImage" class="image"></div>
</div>
JS
$(document).mousemove(function(event) {
$('#light').offset({
top: event.pageY - 50,
left: event.pageX - 50
});
var _top = (- $('#light').offset().top) + 'px';
var _left = (- $('#light').offset().left) + 'px';
$('#fakeImage').css({'top': _top, 'left': _left });
});
The random image required a unique class with the same image.
JSFiddle example
Add a massive border to the #light and add a negative margin:
https://jsfiddle.net/mpcmvej6/
.
And remove #overlay.
This method seems the most simple to me.
The good part about this method is that there is no need to support box shadow and it does not require a second image element.
Another method is putting a copy of the image inside #light and move it in the opposite direction of #light.
I have some images, and I want them to scale and change position when clicked (this part is working).
Then I want them to scale down and move back to their original position when clicked again (works), if I click the "close" button (partly works – "close" button is not fading on first click), or if I click anywhere on the screen (don't know how).
The main problem is that when the clicked image is back in its original position, none of the images are clickable, so I can't make the function work more than once.
Any help would be appreciated!
jQuery:
$(document).ready(function(){
var itemImages = $('.foo, .bar, .foobar, .barfoo');
$(itemImages).click(function(){
$(this).addClass("scaled");
$(itemImages).addClass("blur");
$(this).removeClass("blur");
$(itemImages).off('click');
$('.close').fadeIn('slow');
$(this).on('click',itemClicked);
});
$('.close').click(function(){
$(itemImages).removeClass("scaled");
$(itemImages).removeClass("blur");
$(itemImages).on('click');
$(this).fadeOut('fast');
});
function itemClicked() {
$(this).removeClass("scaled");
$(itemImages).removeClass("blur");
$(itemImages).on('click');
}
});
CSS:
.blur {
-webkit-filter: blur(5px);
transition: .5s -webkit-filter linear;
}
.scaled {
-webkit-transform: scale(2.2);
left: 1300px;
top: 500px;
z-index: 3;
}
.close {
width: 86px;
height:86px;
background: url(../images/icons.png) top left;
position: absolute;
right: 40px;
top: 40px;
display: none;
}
#items img {
position: absolute;
transition: all .2s ease-out;
}
.foo {
left: 94px;
top: 133px;
width: 275px;
height: auto;
}
.bar {
left: 537px;
top: 63px;
width: 317px;
height: auto;
}
.foobar {
left: 958px;
top: 86px;
width: 432px;
height: auto;
}
.barfoo {
left: 1556px;
top: 77px;
width: 270px;
height: auto;
}
Html:
<section id="items" class="fullscreen">
<div class="close"></div>
<img class="foo" src="items/image1.png">
<img class="bar" src="items/image2.png">
<img class="foobar" src="items/image3.png">
<img class="barfoo" src="items/image4.png">
</section>
You can do something like
$(document).ready(function() {
var itemImages = $('.foo, .bar, .foobar, .barfoo');
itemImages.click(function() {
if ($(this).hasClass('blur')) {
return;
}
if ($(this).hasClass('scaled')) {
reset();
return;
}
$(this).addClass("scaled");
itemImages.not(this).addClass("blur");
$(this).removeClass("blur");
$('.close').fadeIn('slow');
});
$('.close').click(reset);
function reset() {
itemImages.removeClass("scaled blur");
$('.close').fadeOut('fast');
}
});
.blur {
-webkit-filter: blur(5px);
transition: .5s -webkit-filter linear;
}
.scaled {
-webkit-transform: scale(2.2);
left: 1300px;
top: 500px;
z-index: 3;
}
.close {
width: 86px;
height: 86px;
background: url(../images/icons.png) top left;
position: absolute;
right: 40px;
top: 40px;
display: none;
}
#items img {
position: absolute;
transition: all .2s ease-out;
}
.foo {
left: 94px;
top: 133px;
width: 275px;
height: auto;
}
.bar {
left: 537px;
top: 63px;
width: 317px;
height: auto;
}
.foobar {
left: 958px;
top: 86px;
width: 432px;
height: auto;
}
.barfoo {
left: 1556px;
top: 77px;
width: 270px;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="items" class="fullscreen">
<div class="close"></div>
<img class="foo" src="http://smartbuildings.unh.edu/wp-content/uploads/2015/06/Winter-Tiger-Wild-Cat-Images1-1024x576.jpg">
<img class="bar" src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Hero/US/Oct2015/ultrapacks-sb10069585o-002.jpg">
<img class="foobar" src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Hero/US/Sept2015/hero-celeb-witherspoon-471371572.jpg">
<img class="barfoo" src="http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg">
</section>
you are supposed to re-bind the click event, not to use on:
$(document).ready(function(){
var itemImages = $('.foo, .bar, .foobar, .barfoo');
var setClick = function(){
$(itemImages).click(function(){
$(this).addClass("scaled");
$(itemImages).addClass("blur");
$(this).removeClass("blur");
$(itemImages).off('click');
$('.close').fadeIn('slow');
$(this).on('click',itemClicked);
});
}
$('.close').click(function(){
$(itemImages).removeClass("scaled");
$(itemImages).removeClass("blur");
setClick();
$(this).fadeOut('fast');
});
function itemClicked() {
$(this).removeClass("scaled");
$(itemImages).removeClass("blur");
$(itemImages).on('click');
}
});
The problem is, that $().on(); does not work like this: $(itemImages).on('click');. I guess, you try to reverse the $(itemImages).off('click'); statement. You need to pass the event handler that shall get attached to the on function or use the click function again. So the easiest way is to define the event handler in a separate function and attach it again:
$(document).ready(function () {
var itemImages = $('.foo, .bar, .foobar, .barfoo');
$(itemImages).click(itemImages_click);
$('.close').click(function () {
$(itemImages).removeClass("scaled");
$(itemImages).removeClass("blur");
$(itemImages).on('click');
$(this).fadeOut('fast');
});
function itemClicked() {
$(this).removeClass("scaled");
$(itemImages).removeClass("blur");
$(itemImages).click(itemImages_click);
}
function itemImages_click(e) {
$(this).addClass("scaled");
$(itemImages).addClass("blur");
$(this).removeClass("blur");
$(itemImages).off('click');
$('.close').fadeIn('slow');
$(this).on('click', itemClicked);
};
});
.blur {
-webkit-filter: blur(5px);
transition: .5s -webkit-filter linear;
}
.scaled {
-webkit-transform: scale(2.2);
left: 1300px;
top: 500px;
z-index: 3;
}
.close {
width: 86px;
height:86px;
background: url(../images/icons.png) top left;
position: absolute;
right: 40px;
top: 40px;
display: none;
}
#items img {
position: absolute;
transition: all .2s ease-out;
}
.foo {
left: 94px;
top: 133px;
width: 275px;
height: auto;
}
.bar {
left: 537px;
top: 63px;
width: 317px;
height: auto;
}
.foobar {
left: 958px;
top: 86px;
width: 432px;
height: auto;
}
.barfoo {
left: 1556px;
top: 77px;
width: 270px;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="items" class="fullscreen">
<div class="close"></div>
<img class="foo" src="http://smartbuildings.unh.edu/wp-content/uploads/2015/06/Winter-Tiger-Wild-Cat-Images1-1024x576.jpg">
<img class="bar" src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Hero/US/Oct2015/ultrapacks-sb10069585o-002.jpg">
<img class="foobar" src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Hero/US/Sept2015/hero-celeb-witherspoon-471371572.jpg">
<img class="barfoo" src="http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg">
</section>