How to do this effect?

Resolved masheen
(@masheen)

10 years, 5 months ago

Hi every body, plz help me. How to do this effect opacity when page scroll down
http://hkar.ru/FmbY
http://xn—-7sbaabjtzyv6awe8k.xn--p1ai/

Viewing 8 replies - 1 through 8 (of 8 total)

(@tahoerock)

Hi masheen
It would be a lot of to change on your theme,
Your Theme is Zerif Lite, and theme you like is Sydney,
Best way would be to switch to Sydney Theme, which has this properties like
Fixed Menu
z-index
Easing and scrolling run by java script and so on…….

…and you have 2 menues , which is another obstacle

HERE IS A SAMPLE CSS CODE THAT IS SUPPORTING THESE PROPERTIES:

.site-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: red;
    padding: 20px 0;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.site-header.fixed {
    position: fixed;
}

.site-header.float-header {
    background-color: rgba(0,0,0,0.9);
    padding: 5px;
}

Sydne Theme is build like this by default.
Your Theme would take a lot of work to change it.
Hope this will be helpful
Cheers
TR

Thread Starter

masheen

(@masheen)

10 years, 5 months ago

What if I do like, but instead Hover to indicate something associated with Scorll ??? Or something like that? Edit zerif-lite style.css

}
.header.header > .navbar {
	background-color: rgba(0,0,0,0.1);
	-webkit-box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
	box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
transition: background 0.3s ease 0.5s, transform 0.2s ease-in-out 0.5s;

}

.header.header > .navbar:hover
{
background:rgba(0,0,0,0.5);
-webkit-animation: pulse 1.5s infinite ease-in-out;
}

codeManiac

(@codemaniac)

10 years, 5 months ago

Hey masheen !

Zerif lite uses bootstrap and a fixed navbar already and yes there is always a solution to any problem.it can be done using the following jQuery :

$(document).ready(function(){
   var scroll_start = 0;
   var startchange = $('#AN_ID_WHERE_YOU_WANT_OP_CHANGE');
   var offset = startchange.offset();
    if (startchange.length){
       $(document).scroll(function() {
       scroll_start = $(this).scrollTop();
       if(scroll_start > offset.top) {
         $(".navbar-default").css('background-color', 'rgba(0,0,0,.9)');
       }
     });
   }
});

ofc you will have to wrap that code ( you need to wrap jQuery code when using it with WordPress ) and put the correct section ID of where you want the color to change.Maybe also paste your website link? that would be more helpful in case you didn’t know how to follow the solution 🙂

Cheers !

Thread Starter

masheen

(@masheen)

10 years, 5 months ago

Hi codeManiac
maybe???

var headerFixed = function() {
			var headerFix = $('.header.header > .navbar').offset().top;
			$(window).on('load scroll', function() {
				var y = $(this).scrollTop();
				if ( y >= headerFix) {
					$('.header.header > .navbar').addClass('fixed');
				} else {
					$('.header.header > .navbar').removeClass('fixed');
				}
				if ( y >= 107 ) {
					$('.header.header > .navbar').addClass('float-header');
				} else {
					$('.header.header > .navbar').removeClass('float-header');
				}
			});
	};

Thread Starter

masheen

(@masheen)

10 years, 5 months ago

At Sidney in Main.js there is this code. I understand it adds a class of float-header if Y>107

var headerFixed = function() {
			var headerFix = $('.site-header').offset().top;
			$(window).on('load scroll', function() {
				var y = $(this).scrollTop();
				if ( y >= headerFix) {
					$('.site-header').addClass('fixed');
				} else {
					$('.site-header').removeClass('fixed');
				}
				if ( y >= 107 ) {
					$('.site-header').addClass('float-header');
				} else {
					$('.site-header').removeClass('float-header');
				}
			});

and then it is called style.css.

.site-header {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1000;
		background-color: rgba(0,0,0,0.0);
		padding: 20px 0;
		-webkit-transition: all 0.3s ease-out;
		   -moz-transition: all 0.3s ease-out;
		    -ms-transition: all 0.3s ease-out;
		     -o-transition: all 0.3s ease-out;
		        transition: all 0.3s ease-out;

	}

.site-header.fixed {
    position: fixed;
}

.site-header.float-header {
    background-color: rgba(0,0,0,0.9);
    padding: 5px;
}

The Zerif-lite it is called .header.header > .navbar

.header.header > .navbar {
	background-color: rgba(0,0,0,0.1);
	-webkit-box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
	box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);

so i need to Zerif-lite in bootstrap.min add modified code???

var headerFixed = function() {
			var headerFix = $('.header.header > .navbar').offset().top;
			$(window).on('load scroll', function() {
				var y = $(this).scrollTop();
				if ( y >= headerFix) {
					$('.header.header > .navbar').addClass('fixed');
				} else {
					$('.header.header > .navbar').removeClass('fixed');
				}
				if ( y >= 107 ) {
					$('.header.header > .navbar').addClass('float-header');
				} else {
					$('.header.header > .navbar').removeClass('float-header');
				}
			});
	};
$(function() {
		headerFixed();
}

and in Style.css call .header.header > .navbar.float-header

.header.header > .navbar {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1000;
		background-color: rgba(0,0,0,0.0);
		padding: 20px 0;
		-webkit-transition: all 0.3s ease-out;
		   -moz-transition: all 0.3s ease-out;
		    -ms-transition: all 0.3s ease-out;
		     -o-transition: all 0.3s ease-out;
		        transition: all 0.3s ease-out;

	}

.header.header > .navbar.fixed {
    position: fixed;
}

.header.header > .navbar.float-header  {
    background-color: rgba(0,0,0,0.9);
    padding: 5px;
}

right?? but it is not work! :-(((

Thread Starter

masheen

(@masheen)

10 years, 5 months ago

It’s works -))) thx all

http://alter.esy.es/

codeManiac

(@codemaniac)

10 years, 5 months ago

glad it worked ! until the next time 🙂

Tahoerock