I'm trying to change the background color on a section.
<section id="welcome" class="gradientBlue">
<div class="mainTitle">
<h1>Sdesigns</h1>
<h2>Taking web design to the next level</h2>
<div class="centerArrow">
<i id="0" class="icon-caret-down arrow arrowDown"></i>
</div>
</div>
</section>
The is how it currently looks:
The Idea is when I press the arrow the background changes to another gradient color. I already set this class up. So It should slowly fade-in class "gradientGreen".
.gradientGreen{
background-color:#39b54a;
background: -webkit-gradient(radial, center center, 0, center center, 460, from(#8dc63f), to(#205075));/* Safari 4-5, Chrome 1-9 */
background: -webkit-radial-gradient(circle, #8dc63f, #39b54a);/* Safari 5.1+, Chrome 10+ */
background: -moz-radial-gradient(circle, #8dc63f, #39b54a);/* Firefox 3.6+ */
background: -ms-radial-gradient(circle, #8dc63f, #39b54a);/* IE 10 */
}
I already tried this and many more in Jquery but it always changes instant. I hope anyone can help me.
$('.arrowDown').click(function(e) {
$("#welcome").addClass("gradientGreen");
}
See DEMO.
You can detach the background from the element by creating two separate <div>s with the gradients that are absolutely positioned beneath the target element. Then you can animate with the opacity to switch between these two gradients.
<section id="welcome">
<div class="mainTitle"><!-- your text --></div>
<div id="back1" class="gradientBlue"></div>
<div id="back2" class="gradientGreen"></div>
</section>
#welcome {
position: relative;
}
#back1 {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
top: 0;
left: 0;
}
#back2 {
position: absolute;
width: 100%;
height: 100%;
z-index: -2;
top: 0;
left: 0;
}
Then change the opacity of the initial background.
$('.arrowDown').click(function (e) {
$("#back1").animate({opacity: 0}, 1000);
});
You might want to take a look at the transition property. It's all CSS3, no jquery needed !
Edit : my bad, as Antony said you can't apply transitions to background gradients.
Related
Is it possible to set the opacity of a background image without affecting the opacity of child elements?
Example
All links in the footer need a custom bullet (background image) and the opacity of the custom bullet should be 50%.
HTML
<div id="footer">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
CSS
#footer ul li {
background: url(/images/arrow.png) no-repeat 0 50%;
}
What I've Tried
I tried setting the opacity of the list items to 50%, but then the opacity of the link text is also 50% - and there doesn't seem to be a way to reset the opacity of child elements:
#footer ul li {
background: url(/images/arrow.png) no-repeat 0 50%;
/* will also set the opacity of the link text */
opacity: 0.5;
}
I also tried using rgba, but that doesn't have any effect on the background image:
#footer ul li {
/* rgba doesn't apply to the background image */
background: rgba(255, 255, 255, 0.5) url(/images/arrow.png) no-repeat 0 50%;
}
You can use CSS linear-gradient() with rgba().
div {
width: 300px;
height: 200px;
background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://i.imgur.com/xnh5x47.jpg");
}
span {
background: black;
color: white;
}
<div><span>Hello world.</span></div>
Take your image into an image editor, turn down the opacity, save it as a .png and use that instead.
This will work with every browser
div {
-khtml-opacity:.50;
-moz-opacity:.50;
-ms-filter:"alpha(opacity=50)";
filter:alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
opacity:.50;
}
If you don't want transparency to affect the entire container and its children, check this workaround. You must have an absolutely positioned child with a relatively positioned parent.
Check demo at http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/
If you are using the image as a bullet, you might consider the :before pseudo element.
#footer ul li {
}
#footer ul li:before {
content: url(/images/arrow.png);
filter:alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
opacity:.50;
}
You can put the image in the div:after or div:before and set the opacity on that "virtual div"
div:after {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
opacity: 0.25;
}
found here
http://css-tricks.com/snippets/css/transparent-background-images/
#footer ul li {
position: relative;
opacity: 0.99;
}
#footer ul li::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
background: url(/images/arrow.png) no-repeat 0 50%;
opacity: 0.5;
}
Hack with opacity .99 (less than 1) creates z-index context so you can not worry about global z-index values. (Try to remove it and see what happens in the next demo where parent wrapper has positive z-index.)
If your element already has z-index, then you don't need this hack.
Demo of this technique.
Unfortunately, at the time of writing this answer, there is no direct way to do this. You need to:
use a semi-transparent image for background (much easier).
add an extra element (like div) next to children which you want the opaque, add background to it and after making it semi-transparent, position it behind mentioned children.
Another option is CSS Tricks approach of inserting a pseudo element the exact size of the original element right behind it to fake the opaque background effect that we're looking for. Sometimes you will need to set a height for the pseudo element.
div {
width: 200px;
height: 200px;
display: block;
position: relative;
}
div::after {
content: "";
background: url(image.jpg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
The "filter" property, needs an integer for percentage of opacity instead of double, in order to work for IE7/8.
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
P.S.: I post this as an answer, since SO, needs at least 6 changed characters for an edit.
To really fine-tune things, I recommend placing the appropriate selections in browser-targeting wrappers. This was the only thing that worked for me when I could not get IE7 and IE8 to "play nicely with others" (as I am currently working for a software company who continues to support them).
/* color or background image for all browsers, of course */
#myBackground {
background-color:#666;
}
/* target chrome & safari without disrupting IE7-8 */
#media screen and (-webkit-min-device-pixel-ratio:0) {
#myBackground {
-khtml-opacity:.50;
opacity:.50;
}
}
/* target firefox without disrupting IE */
#-moz-document url-prefix() {
#myBackground {
-moz-opacity:.50;
opacity:0.5;
}
}
/* and IE last so it doesn't blow up */
#myBackground {
opacity:.50;
filter:alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
}
I may have redundancies in the above code -- if anyone wishes to clean it up further, feel free!
we can figure out that by not playing with opacity just by using rgba color
e.g "background-color: rgba(0,0,0, 0.5)"
Sample :
Previous Css:
.login-card {
// .... others CSS
background-color: #121e1b;
opacity: 0.5;
}
To :
.login-card {
// .... others CSS
background-color: rgba(0, 0, 0, 0.5);
}
If you have to set the opacity only to the bullet, why don't you set the alpha channel directly into the image? By the way I don't think there is a way to set the opacity to a background image via css without changing the opacity of the whole element (and its children too).
Just to add to the above..you can use the alpha channel with the new color attributes eg. rgba(0,0,0,0) ok so this is black but with zero opacity so as a parent it will not affect the child. This only works on Chrome, FF, Safari and....I thin O.
convert your hex colours to RGBA
I found a pretty good and simple tutorial about this issue. I think it works great (and though it supports IE, I just tell my clients to use other browsers):
CSS background transparency without affecting child elements, through RGBa and filters
From there you can add gradient support, etc.
#footer ul li
{
position:relative;
list-style:none;
}
#footer ul li:before
{
background-image: url(imagesFolder/bg_demo.png);
background-repeat:no-repeat;
content: "";
top: 5px;
left: -10px;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
opacity: 0.5;
}
You can try this code. I think it will be worked. You can visit the demo
I'm currently working on a project where the desired user experience involves a very customized interaction with scroll events.
Problem to solve:
The page has X sections, each of them with a height equal to the viewport hight height: 100vh;. When a user scrolls down on the viewport, the current visible section stays where it is and a scroll indicator animates based on a threshold of distance scrolled (30px, for example). Once the user has scrolled the threshold, the next section comes up from the bottom of the screen and covers up the current section (which still doesn't move).
Initial Approach:
Set each section to an absolute position and adjust them with by changing CSS classes based on the scrollwheel event. Body overflow:hidden and transform property to manipulate the sections. I am running in to issues, though.
The scrollwheel event seems to be documented as very unstable solution to implement.
The .wheelDelta aspect of the event fires asynchronously and is difficult to capture a gesture with. (On chrome, it just spits out a multiple of 3 a bunch of times rather than a distance of the gesture in px). This makes it difficult to set a threshold and animate the elements that are responsive to that threshold.
I basically want to be able to track the number of pixels a scrollwheel-like event is covering and apply that number to the position of a certain scroll-hint element until the scroll threshold is met. Once it is met, a function fires to change the classes and update some information on the page. If the threshold is not met, the scroll hint element goes back to it's default position.
My attached approach doesn't feel very conducive to accomplishing this, so I'm looking for either 1) a different and more stable approach or 2) revisions / criticisms on what I'm doing wrong with this approach to make it stable.
(function scrollerTest($){
$('body').on ('mousewheel', function (e) {
var delta = e.originalEvent.wheelDelta,
currentScreenID = $('section.active').data('self').section_id,
currentScreen = $('section.part-' + currentScreenID),
nextScreenID = currentScreenID + 1,
nextScreen = $('section.part-' + nextScreenID);;
if (delta < 0) { // User is Scrolling Down
currentScreen.removeClass('active').addClass('top');
nextScreen.removeClass('bottom').addClass('active')
} else if (delta > 0) { // User is Scrolling Up
}
});
}(jQuery));
body {
overflow: hidden;
padding: 0;
margin: 0;
}
section {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 999;
background-color: #CA5D44;
transition: 0.8s all ease-in-out;
}
section.part-1 {
position: relative;
z-index: 9;
}
section.part-2 {
background-color: #222629;
}
section.active {
transform: translateY(0);
}
section.top {
transform: translateY(-10%);
}
section.bottom {
transform: translateY(100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
<section class="part-1 home active" data-self='{ "section_id" : 1, "section_title" : "Home", "menu_main_clr" : "#fff" , "menu_second_clr" : "#CA5D44", "logo_clr" : "white" }'>
</section>
<section class="part-2 about bottom" data-self='{ "section_id" : 1, "section_title" : "About", "menu_main_clr" : "#CA5D44" , "menu_second_clr" : "#fff", "logo_clr" : "white" }'>
</section>
<section class="part-3 contact bottom" data-self='{ "section_id" : 1, "section_title" : "Contact", "menu_main_clr" : "#fff" , "menu_second_clr" : "#CA5D44", "logo_clr" : "white" }'>
</section>
</body>
Edit Note:
The snippet seems to have some issue with firing the event and changing classes after the first instance - not sure why. On my local example it fires them all at once..
**Edite Note 2: **
Listed code is just a copy of the closest behaviour I could achieve. The whole threshold functionality seems pretty unattainable with this method, unfortunately, as the wheel event doesn't behave like a scroll event.
the whole scroll topic is rather complex especially when you think about touch scroll events, too.
There are some libraries out there - see this list for example: http://ninodezign.com/30-jquery-plugins-for-scrolling-effects-with-css-animation/
I used https://projects.lukehaas.me/scrollify/ before and it might allow you to do what you intend (using the before callback eventually) but I can't tell without trying myself. Also regard that scrollify is relatively big (8kb minified) in comparison to other libraries.
You can approach this using by ensuring each content-filled section is followed by a blank transparent gap (in the example below, also 100vh in height) and then using javascript to apply position:fixed to each content-filled section when it hits the top of the viewport.
Example:
var screens = document.getElementsByClassName('screen');
function checkPosition() {
for (var i = 0; i < (screens.length - 1); i++) {
var topPosition = screens[i].getBoundingClientRect().top;
if (topPosition < 1) {
screens[i].style.top = '0';
screens[i].style.position = 'fixed';
}
}
}
window.addEventListener('scroll',checkPosition,false);
.screen {
position: absolute;
display: block;
left: 0;
width: 100%;
height: 100vh;
}
.red {
position: fixed;
top: 0;
background-color: rgb(255,0,0);
}
.orange {
top: 200vh;
background-color: rgb(255,140,0);
}
.yellow {
top: 400vh;
background-color: rgb(255,255,0);
}
.green {
top: 600vh;
background-color: rgb(0,191,0);
}
.blue {
top: 800vh;
background-color: rgb(0,0,127);
}
p {
font-size: 20vh;
line-height: 20vh;
text-align: center;
color: rgba(255,255,255,0.4);
}
<div class="red screen">
<p>Screen One</p>
</div>
<div class="orange screen">
<p>Screen Two</p>
</div>
<div class="yellow screen">
<p>Screen Three</p>
</div>
<div class="green screen">
<p>Screen Four</p>
</div>
<div class="blue screen">
<p>Screen Five</p>
</div>
I am using slick slider. I have created two div's. Here is details :)
This is the css for these two divs
.Full_Left {
position: absolute;
top: 0px;
width: 50%;
height: 100%;
background: rgba(34, 25, 165, 0.5);
left: 0px;
z-index: 2;
}
.Full_Left:hover {
cursor: url(../images/right.svg), auto;
}
.Full_Right {
position: absolute;
top: 0px;
width: 50%;
height: 100%;
background: rgba(216, 33, 33, 0.5);
right: 0px;
z-index: 2;
}
.Full_Right:hover {
cursor: url(../images/left.svg), auto;
}
as you can see now my div's are on full screen and I want to control the slider with the links I have created so that when user bring mouse on 50% he have right arrow and same for left side and all of the slider content will be below these two layers.
I am wondering this is possible with "Slick" or not ?
Thanks in advance.
I had a similar use case to this, though with a twist. Finding this question pointed me in the right direction, and my answer below does address controlling a Slick slider with external links.
I have a Slick slider in the right column set to position: fixed and a longer story in the right column that scrolls. Each of the slides in the slider corresponds to a section of the story, set apart by <h3> tags. I wanted a link next to each header that set the slideshow to the corresponding slide when clicked. To accomplish this, I added a button at the end of each section header:
<h3>Section Header <button data-slick-index="0" class="slide-to"><i class="fa fa-camera-retro" aria-hidden="true"></i></button></h3>
The data-slick-index property (is it a property?) was set to the slick-index of the corresponding slide. Then just below my Slick init JS I placed the following:
$(".slide-to").bind("click", function() {
var slidx = $(this).attr('data-slick-index');
$('#slideshow').slick('slickGoTo', slidx);
});
Works like a charmp*.
That's a charm and a champ combined.
I have solved this problem by my self. here is my working code
<script type="text/javascript">
$('.Full_Right').click(function(e) {
$('#Contrroll').slick('slickNext');
});
$('.Full_Left').click(function(e) {
$('#Contrroll').slick('slickPrev');
});
</script>
:)
I’m having trouble with a hover technique I’m trying to implement on a site. Basically, I have div (.portfolio-item) which is used to display a background-image. The .portfolio-item contains one direct child — <div class="portfolio-item-info"> which is absolutely positioned and is only shown when the user hovers over the parent element.
This works fine on laptops and Android devices but for iOS devices it doesn’t work at all. So if the user touches the .portfolio-item div, nothing happens.
HTML
<div class="portfolio-item" style="background-image: url('path/to/url')">
<div class="portfolio-item-info">
<h3 class="font-secondary-bold">Some Title</h3>
<ul class="list-unstyled list-inline">
<li>Publication</li>
<li>Print</li>
</ul>
Take a look
</div>
</div>
CSS
.portfolio-item {
background-color: #fff;
background-size: cover;
margin-bottom: 24px;
overflow: hidden;
position: relative;
min-height: $portfolioItemHeight;
&:before {
content: "";
background-color: $colorLight;
background-color: rgba(255, 255, 255, 0.8);
min-height: $portfolioItemHeight;
opacity: 0;
position: absolute;
left: 0;
right: 0;
transition: opacity 0.5s ease-in-out;
}
&:hover,
&:focus {
&:before {
opacity: 1;
}
.portfolio-item-info {
top: 0;
}
}
}
To make it work I’m using something really hacky, I’m putting an onclick attribute on the .portfolio-item div e.g.
<div class="portfolio-item" onclick="void(0)" style="background-image: url('path/to/url')">
This hacky solution does work but I’d ideally like something less… hacky.
No standard defines how touch devices should deal with hover and it's up to the browser vendor, so any solution will be a kind of 'hack'. However, the following one is more reliable:
Using jQuery you can turn the class hover on / off on touch start / end
$(document).ready(function() {
$('.portfolio-item').bind('touchstart touchend', function(e) {
e.preventDefault();
$(this).toggleClass('hover');
});
});
In CSS you add the .hover class with the same parameters as existing :hover.
The little popup window appears in the middle of the original page.
The original page is covered by grey shade if not by the popup window.
The underneath original page can still be scrolled up and down.
Follow these steps:
1) Create this CSS rule:
.overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
opacity: 0.5;
background: #666;
filter: alpha(opacity=50); /* opacity for IE browsers */
}
2) Add this code to your jQuery:
$("body").prepend("<div class='overlay'></div>");
3) When done, remove it like this:
$(".overlay").remove();
Didn't test this, but it should work (maybe with very minor modifications). This is one way, if you prefer doing it by yourself. You can, however, use existing solutions such as Twitter's Bootstrap lib which is cool, and I recommend it.
http://twitter.github.com/bootstrap/
Regards.
You could use the JQueryUI dialog widget http://jqueryui.com/dialog/#modal
This is easy enough to achieve with some simple CSS...
The overlay (the grey background) is fixed in place and covers everything below:
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0;
filter: alpha(opacity=0);
z-index: 2; // above content
}
The "dialog" itself is similar in style, but smaller:
#dialog {
display: none;
position: fixed;
width: 500px;
height: 250px;
background-color: #fff;
z-index: 3; // above 'overlay'
}
The top and left attributes can be calculated with simple JavaScript, so that the dialog can be positioned in the center of the browser:
positionDialog = function() {
if (typeof window.innerHeight != 'undefined') {
dialog.top = parseInt(window.innerHeight / 2) - dialog.height;
dialog.left = parseInt(window.innerWidth / 2) - dialog.height;
}
}
And also upon window resize:
$(window).resize(function() {
positionDialog();
}
Notice how the CSS sets these DIVs to display: none. They are hidden until called, which is done by setting them to display: block.
These days, I find that it's much simpler and more robust to rely on jQuery UI's excellent dialog widget.
It's called a light box. There's a way that you can do it using only CSS:
http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/
The key for darkening the background is the CSS opacity property of a box that you cover the background with, which you can set a black background and use this CSS for transparency:
-moz-opacity: 0.8;
opacity:.80;
You could take a look at the modal included in Twitter Bootstrap: http://twitter.github.com/bootstrap/javascript.html#modals