Forum Pasja Informatyki - Najnowsze z tagiem przewijanie

Spowolnienie przewijania

Sat, 05 Nov 2022 16:22:49 +0000

Czy jest możliwość, aby spowolnić przewijanie w wybranym oknie? Chodzi mi o to, żeby w jakimś mniejszym oknie, gdzie kontent dostępny jest w trybie przewijania, można ustawić, żeby scroll nie przewijał domyślnej liczby wierszy, a np. tylko 1 na raz.

Przerwanie zdarzenia sqrollTop po kliknięciu myszką bądź dotknięciem palca

Mon, 27 May 2019 16:01:03 +0000

Mam zrobioną Animacje przerwijania strony. Przewija całość do końca, chciałbym dodać do tego zdarzenie dotknięcia palcem, lub kliknięcia myszką, które spowoduję pauze, lub całkowicie przerwie tą animacje.

$("#arrow").click(function () {
    $('html,body').animate({
            scrollTop: $("footer").offset().top
        },
        35000);
});

Jak mogę to przerwać w trakcie? Zatrzymać w momencie dotknięcia palcem, szukałem odpowiedniego zdarzenia, ale nie mogę niczego dopasować Najlepiej zatrzymać do czasu puszczenia palca. Tak żeby po dotknięciu ekranu animation.pause a po puszczeniu przewija dalej

Strona przewija się do góry przy wykonaniu funkcji w JavaScript

Mon, 08 Oct 2018 11:52:54 +0000

Witam, mam problem. Tworzę swoje portfolio i stworzyłem funkcje, które podmieniają zawartość diva. Wszystko fajnie działa, tyle, że strona przy wykonaniu każdej funkcji przewija się na sama górę. Da się temu jakoś zapobiec? Uprzedzam, że w temacie JavaScript jestem dość nowy, ale potrzebuje pomocy teraz, bo na jutro muszę mieć gotową stronę. Z góry dziękuję za pomoc!

<script>
          function fn1()
          {
               document.getElementById('content').innerHTML = "pierwsza zawartość"
          }
          function fn2()
          {
               document.getElementById('content').innerHTML = "druga zawartość"
          }
          function fn3()
          {
               document.getElementById('content').innerHTML = "3 zawartość"
          }
          function fn4()
          {
               document.getElementById('content').innerHTML = "4 zawartość"
          }
          function fn5()
          {
               document.getElementById('content').innerHTML = "piąta zawartość"
          }
     </script>

<h1>Krótko o mnie</h1>
                                   <a href="#">
                                        <div id="tile1" onclick="fn1()">
                                             <p>Historia<br /><i class="icon-street-view"></i></p>
                                        </div>
                                   </a>
                                   <a href="#">
                                        <div id="tile2" onclick="fn2()">
                                             <p>Wrażliwość<br /><i class="icon-note"></i></p>
                                        </div>
                                   </a>
                                   <a href="#">
                                        <div id="tile3" onclick="fn3()">
                                             <p>Psychologia<br /><i class="icon-users"></i></p>
                                        </div>
                                   </a>
                                   <a href="#">
                                        <div id="tile4" onclick="fn4()">
                                             <p>Rozwój osobisty<br /><i class="icon-user"></i></p>
                                        </div>
                                   </a>
                                   <a href="#">
                                        <div id="tile5" onclick="fn5()">
                                             <p>Programowanie<br /><i class="icon-code"></i></p>
                                        </div>
                                   </a>

Jak zrobić taki efekt?

Fri, 06 Apr 2018 18:42:54 +0000

Znalazłem takiego bloga https://szulcu.net/ i spodobał mi się ten pasek menu u góry. Wiem że aby taki uzyskać wystarczy zmienić przeźroczystość, ale jak zrobić a tak się "chował" po zjechaniu kursorem w dół

Przewijanie strony do góry, jquery, strzałka w górę

Fri, 02 Mar 2018 17:32:20 +0000

Dobry wieczór,

Coś mi nie działa, chcę dodać przycisk przewijania strony do góry wszystko jest okej tylko jakby tego skryptu nie wczytuje bo nic nie przewija, co jest zrobione nie tak?

html

<!DOCTYPE HTML>
<html lang="pl">
<head> 
     <meta charset="utf-8"/>
	  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	  <meta name="author" content="PROFF"/>
	      <title>Pasja Informatyki</title>
	  <meta name="description" content="Pasja informatyki, nauka, programowanie, html"/>
	  <meta name="keywords" content= "www,html,pasja,informatyki"/>
	  <link rel="stylesheet" href="main.css">
	  <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="jquery.scrollTo.min.js"></script>
		<script>
		$(function(){
 
	$(window).scroll(function() {
		if ($(window).scrollTop() > 100) {
			$('.scrollTopButton').addClass('show');
		} else {
			$('.scrollTopButton').removeClass('show');
		}
	});
 
	$('.scrollTopButton').click(function() {
		$('body').animate({scrollTop: 0}, 400, 'linear');
	});
});
		
		</script>

	  </head>
	  
	  <body>
		<div id="container">
		
				
					
				<div id="logo"><a class="logo1" href="index.html"><img src="img/logo.png"></a></div>
				
				 <div id="blok">
    <p>Witaj na proff-page.000webhostapp.com! Strona została stworzona na potrzeby mojej nauki pisania w języku HTML i CSS, oraz obsługi baz danych. Życz mi powodzenia! :) </p>
  </div>
				
				<nav>	
				<div id="menu">
				<ol>				
						<li><a href="index.html">Start</a></li>
						
						<li><a href="#">O mnie</a>  <ul>
        <li><a href="kimjestem.html">Kim Jestem?</a></li>
        <li><a href="quiz.html">Quiz</a></li>
      </ul>
    </li>
						
					
						<li><a href="kontakt.html">Kontakt</a></li>
						<li><a href="conowego.html">Co nowego?</a></li>
	
				</ol>
		</div>
							</nav>
							
							<main>
							<div class="content">
			<p ><div class="mottojpg"><img  src="img/motto.jpg"></div><div class="motto">"Znajdź pracę którą pokochasz, a nie przepracujesz ani jednego dnia w swoim życiu." - Konfucjusz</div></p><br><br><br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat vehicula dolor, quis tempor purus egestas eget. Vivamus luctus felis sit amet tortor condimentum sollicitudin. Nulla facilisi. Ut dictum ornare justo, laoreet laoreet massa aliquam in. Proin efficitur felis quis sapien sagittis posuere non nec sapien. Donec at convallis urna. Curabitur faucibus turpis sit amet arcu volutpat, a pellentesque velit tempus. Ut porttitor tristique pulvinar. Donec a luctus ante. Nulla tristique lorem vestibulum lectus mattis, sit amet auctor erat suscipit. Vivamus condimentum felis et massa rhoncus tincidunt. Aliquam a velit et velit vehicula pellentesque eget a lacus. Fusce eu faucibus risus, a congue risus. Maecenas rhoncus libero sit amet nunc finibus, sit amet egestas elit vulputate. Suspendisse auctor viverra felis, id bibendum augue accumsan suscipit.</p>

			<p>Maecenas nec est interdum, imperdiet turpis at, convallis quam. Aenean pellentesque laoreet urna, vel lobortis felis aliquet viverra. Nulla facilisi. Suspendisse volutpat congue nisl ut fringilla. Proin suscipit justo orci, vel varius nibh dignissim ut. Integer non magna lacus. Sed ac purus vitae libero congue efficitur. In non mauris id mi semper convallis. Ut feugiat pulvinar est id varius. Ut eu libero malesuada, vestibulum sem sit amet, efficitur lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>

			<p>Morbi a consectetur turpis. Donec finibus bibendum diam, eget ullamcorper augue porttitor eu. Donec luctus arcu vel nisi tempor sollicitudin. In hac habitasse platea dictumst. Mauris leo erat, elementum eu hendrerit vitae, pharetra vel eros. Phasellus accumsan felis enim. Nam vehicula ex vitae sem facilisis vestibulum. Praesent ac lorem a nibh commodo mollis.</p>

			<p>Aliquam at neque in enim euismod auctor nec vel nunc. Suspendisse sed efficitur libero. Vivamus volutpat vulputate turpis pharetra venenatis. Pellentesque et porta massa, sit amet dignissim ante. Maecenas laoreet lorem a mi eleifend, in lacinia ante rutrum. Nam id convallis arcu. Sed a cursus diam. Maecenas convallis metus a ligula vehicula, eu sodales nulla bibendum. Aenean egestas consectetur nibh quis facilisis. Aliquam venenatis risus eu libero maximus, vel gravida tellus vulputate.</p>

			<p>Fusce vehicula fermentum nisl in mollis. Nulla sed ex in libero consequat imperdiet. Praesent leo mi, egestas eget lobortis in, elementum in massa. Mauris tincidunt tempus leo, ut imperdiet nibh efficitur in. Pellentesque sed orci sit amet velit porta elementum eu ut ipsum. Integer id eleifend ex. Suspendisse ac lorem posuere, placerat elit sed, auctor felis. Vivamus elementum odio dolor, sit amet finibus mauris tristique a. Morbi pharetra odio sit amet dapibus pellentesque. Proin luctus arcu vitae faucibus consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque at odio a nisl vestibulum egestas at vel nisi. Curabitur hendrerit at mauris quis maximus. Maecenas condimentum augue ipsum, eu bibendum erat pharetra quis.</p>
			
			
		

							</div>
			</main>
			</div>
			<span class="scrollTopButton"></span>
			<footer>
		<div class="info">
		Wszelkie prawa zastrzeżone &copy; 2018 dziękuję za wizytę!
			</div>
		</footer>
		
		
	  </body>
	  </html>

css

body
{

	background-color: #1F1F1F;
	font-family: 'Quicksand', sans-serif;

}


#container
{
	width: 1200px;
	margin-left: auto;
	margin-right: auto;
	
}

#logo
{
	margin-top: 70px;
	background-color:#F6F6F6;
	text-align: center;
	
}

.content 
{
	background-color: #114400;
	color: white;
	margin-top: 80px;
	padding: 60px;
-webkit-box-shadow: 0px 0px 31px 7px rgba(237,234,237,1);
-moz-box-shadow: 0px 0px 31px 7px rgba(237,234,237,1);
box-shadow: 0px 0px 31px 7px rgba(237,234,237,1);
border-radius: 10px
}

 a:link
{
	text-decoration:none;
	color: white;
}

a:visited
{
	text-decoration:none;
	color: white;
}

a:hover
{
	text-decoration:none;
	color: white;
}

a.logo1:link {text-decoration:none;}
a.logo1:visited {text-decoration:none;}
a.logo1:visited {text-decoration:none;}
a.logo1:hover {text-decoration:none;}


.info
{
	background-color: #303030;
	height: 25px;
	color: grey;
	text-align: center;
	width: 90%;
	margin: 25px auto auto auto;
}

#menu
{
	padding: auto;
	text-transform: uppercase;
	background-color: #303030;
	color: #ffffff;
	margin: auto;
	width: auto;
	text-align: center;
	line-height:200%;
	height: 36px;
	
}


ol {
  list-style-type:none;
  padding:0;
  margin: 25px auto auto auto;
  font-size:18px;
  height:2em;
  line-height:2em;
  text-align:center;
  background-color: #303030;
}

ol > li {
  float:left;
  width:198px;
 margin-left:1px;
 background-color: #303030;
 border-right:1px solid #1F1F1F;
 
}

ol > li:first-child {
  margin-left:0;
  
  
}


ol > li > ul > li > a {
  border-top:1px solid #1F1F1F;
  
}


ol a {
  display:block;
  color:#000;
  text-decoration:none;
  padding:0 5px;
  
}

ol > li > a:hover {
  color:white;
  
}

ol > li:hover {
  background-color:#404040;
  

}

ol > li > ul {
  list-style-type:none;
  padding:0;
  margin:0;
  
}

ol > li > ul > li {
  background-color:#303030;
}
ol > li > ul > li:hover {
  background-color:#505050;
  
}


ol > li > ul {
  display:none;
}

ol > li:hover > ul {
  display:block;
  
}

ol > li:hover > a {
  color:#66FFFF;
  
}

/* Ruchomy tekst pod logiem*/

 #blok {
        position:relative;
        width:300px;
        height:2.2em;
        line-height:2.2em;
        margin:0 auto;
        border:1px solid #1F1F1F;
        font-size:12px;
        background-color:#303030;
        overflow:hidden;
		color: white;
      }

      #blok > p {
        position:absolute;
        margin:0;
        white-space:nowrap;
        animation:przesun 30s linear infinite;
        -webkit-animation:przesun 30s linear infinite; /* dla Google Chrome, Safari, Opera 15+ */
      }

      #blok > p:hover {
        animation-play-state:paused;
        -webkit-animation-play-state:paused;
      }
	  
      /* ------------ANIMACJA-PRZESUN------------ */
      @keyframes przesun
      {
        0% { transform:translateX(0); padding-left:105%; }
        100% { transform:translateX(-100%); padding-left:105%; }
      }

      @-webkit-keyframes przesun /* dla Google Chrome, Safari, Opera 15+ */
      {
        0% { -webkit-transform:translateX(0); padding-left:105%; }
        100% { -webkit-transform:translateX(-100%); padding-left:105%; }
      }
	  
	  .motto
	  {
		  font-size: 12px;
		  
		  text-align: center;
		  
		  
		  
	  }
	  
	  .mottojpg
	  {
		 width: 550px; 
		 height: 340px;
		 display: block;
		 margin-left: auto;
		 margin-right: auto;
		 overflow: hidden;
		 border-radius: 12px;
	  }
	  
	  .mottojpg img 
	  {
		  	 transition: all 0.5s ease-in-out;
			 
	  }
	  
	  .mottojpg:hover img
	  {
		-webkit-transform: scale(1.15);
	-ms-transform: scale(1.15);
	transform: scale(1.15);
	  }
	


.scrollTopButton {
     width: 40px;
     height: 40px;
     position: fixed;
     visibility: hidden;
     overflow: hidden;
     z-index: 99999999;
     background-image: url('img/up.png');
     right: 25px;
     bottom: 35px;
     transition: all 0.5s ease-in-out;
}

.scrollTopButton.show {
     visibility: visible;
     cursor: pointer;
     transition: all 0.5s ease-in-out;
}

Coś jest źle podpięte czy o co chodzi?

Chce żeby realizowany był ten skrypt :

	<script>
		$(function(){
 
	$(window).scroll(function() {
		if ($(window).scrollTop() > 100) {
			$('.scrollTopButton').addClass('show');
		} else {
			$('.scrollTopButton').removeClass('show');
		}
	});
 
	$('.scrollTopButton').click(function() {
		$('body').animate({scrollTop: 0}, 400, 'linear');
	});
});
		
		</script>

ten plik jqueryscrollto mam w katalogu tam gdzie index, potrzebny mi on do tego w ogóle?

Problem z rozbudową Slidera

Wed, 31 Jan 2018 19:16:03 +0000

Skonstruowałem prosty slider z HTML,CSS i czystym JS (bez JQuery). Zmieniający obrazki co 3 sekundy automatycznie. Wszystko wrzuciłem do 1 funcji AutomaticChanger() i działa. Potem dodałem strzałki, żeby użytkownik mógł przewijać obrazki po swojemu, okodowałem wszystko i podpiąłem pod divy ze strzałkami (metodą "onclick"). I tu mam problem, po kliknięciu strzałki w prawo jest przeskok o 2 obrazki, a nie o zamierzony 1, a strzałka w lewo w sumie nic nie robi. Kilka razy wszystko sprawdzałem i nw co jest nie tak...

CSS:

	body{
		margin:0;
		background-color:black;
		}
		
		div{
		border:2px solid gold;
		width:250px;
		height:250px;
		overflow:hidden;
		margin-top:150px;
		position:relative;
		color:white;
		}
		
		img{
		opacity:0;
		width:250px;
		height:250px;
		position:absolute;
		top:0;
		left:0;
		transition:1.5s linear;
		}
		
		.active{
		opacity: 1;
		}

		#AL{
		font-size:50px;
		width:50px;
		border:none;
		float:left;
		cursor:pointer;
		}

		#AR{
		font-size:50px;
		width:50px;
		border:none;
		float:right;
		cursor:pointer;
		}

HTML:

<html>
<head>
</head>
<body>
	<center>
		<div id="AL" onclick='arrow("L")'>&laquo;</div>
		<div id="AR" onclick='arrow("P")'>&raquo;</div>
	<div>
		<img src="http://dziennikarstwo.wroclaw.pl/wp-content/uploads/2017/11/maxresdefault-1-1.jpg"/>
		<img src="http://i0.kym-cdn.com/entries/icons/original/000/021/425/67497298.jpg"/>
		<img src="https://www.dayzrp.com/uploads/monthly_2016_11/large.5837122d1f6db_DeusVultBitch.png.43771f42e7cdd913c0c7dbeccb5c5bfd.png"/>
		<img src="https://i.imgflip.com/1gm4tn.jpg"/>
		<img src="http://i0.kym-cdn.com/photos/images/facebook/001/176/885/d8a.png"/>
	</div>
	</center>
</body>
</html>

JS:

	var index;
	var timer;
	document.querySelector("img").className = "active";
	AutomaticChanger();
	function AutomaticChanger(){
		var zdjecia = document.querySelectorAll("img");
		for(i = 0 ; i < zdjecia.length ; i++){
			if(zdjecia[i].src == document.querySelector(".active").src){
				index = i;
			}
		}
		if((index+1) < zdjecia.length){
			zdjecia[index].className = "";
			zdjecia[(index+1)].className = "active";
		}else{
			zdjecia[index].className = "";
			zdjecia[0].className = "active";
		}
		timer = setTimeout("AutomaticChanger()",3000);
	}

function arrow(Kierunek){
clearTimeout(timer);
if(Kierunek == "L"){
	var zdjecia = document.querySelectorAll("img");
	for(i = 0 ; i < zdjecia.length ; i++){
	if(zdjecia[i].src == document.querySelector(".active").src){
		index = i;
		break;
	}
	}
	if((index-1) >= 0){
		zdjecia[index].className = "";
		zdjecia[(index-1)].className = "active";
	}else{
		zdjecia[index].className = "";
		zdjecia[(zdjecia.length-1)].className = "active";
	}
	AutomaticChanger();
}else{
	var zdjecia = document.querySelectorAll("img");
	for(i = 0 ; i < zdjecia.length ; i++){
	if(zdjecia[i].src == document.querySelector(".active").src){
		index = i;
		break;
	}
	}
	if((index+1) <= (zdjecia.length-1)){
		zdjecia[index].className = "";
		zdjecia[(index+1)].className = "active";
	}else{
		zdjecia[index].className = "";
		zdjecia[0].className = "active";
	}
	AutomaticChanger();
}
}

Jak wykonać takie przewijanie?

Sun, 10 Dec 2017 17:48:31 +0000

Jak wykonać przewijanie takie jak na filmiku? (Filmik wykonany na telefonie, ponieważ na komputerze ta strona coś mi nie działała ale ogółem chcę, aby to działało na wszystkie urządzenia) Ten filmik

Przewijam stronę w dół. Dlaczego elementy (main) się nie przesuwają ???

Sat, 11 Nov 2017 17:21:54 +0000

Dlaczego elementy nie przesywają się z dołu do góry podczas przewijania myszką ?? Header ma zostać na miejscu :)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" ></script> 
<script type="text/javascript" src="jquery.js"></script>
<script src="jquery.js"></script>
<script src="scripts.js"></script>
</script>
<link rel="stylesheet" href="index.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">  
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
    
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
    
    
</head>

<body>

    
    
            
<div class="header">
     
         <div class="face"> <img src="face.png" style="widht:5vh; height:5vh; "></div> 
    
         <div class="twitter"> <img src="twitter.png" style="widht:5vh; height:5vh; "></div> 
    
    
         <div class="mail"> <img src="mail.png" style="widht:5vh; height:5vh; "></div> 
    

 
<div class="main">

 
      <div class="daro_foto"> </div>   
 
    
<div class="dar_designer">DARIUSZ HOZER</div> 
<div class="passion">Junior Front-End Developer / Freelancer</div>
   

    <div class="half_main"></div>


    </div>
    

    
<div class="main_1">

   

</div>  
        
<div class="main_2"> </div>      
    
<div class="footer"></div>       
    
    

  
   
    
    
</body>

</html>

body{
	width:100%;
	height:500vh;
	margin:0;
	
}

.header{
	
	position:fixed;
	width:100%;
	height:7vh;
	background-color:black;
    z-index: 100;
	
}


.face,.twitter,.mail{
	
	width: 5vh;
  height: 0.5vh;
	display:inline;
	float:left;
	margin-left:1vh;
	margin-top:1vh;
	
	
}

.face:hover,.twitter:hover,.mail:hover{
	
	
	display:inline;
	float:left;
	margin-left:1vh;
	margin-top:0.5vh;
	border:0.2vh solid aqua;
    border-radius: 10%;
	width:5vh;
	height:5vh;
	
	
}






.main{
    
    
    width: 100%;
    height: 92.5vh;
}

.daro_foto{

width: 40vh;
height:40vh;
background-image: url("./daro1.jpg");
background-size: 100% 100%;
position: relative;
top:26.5vh;
left: 37.5vh;
border-radius: 100%;
z-index: 1;
transform:rotate(360deg);
border:solid 0.3vh dodgerblue;
animation:darek_kreci 0.8s;
}




@keyframes darek_kreci {
    0%   {transform:rotate(0deg); left:-70vh;}
    25%  {top:26.6vh;}
    50%  {top: 25vh;}
    75%  {top:  26.5vh;}
    100% {transform:rotate(360deg);}
}



.dar_designer{
    
   width:31%;
   height: :10vh;
   display: none;
   position: relative;
   top: 30vh;
   left:31vh;
   margin:0 ;
   line-height: 4vh;
   font-size: 6vh;
   text-align: center;
   font-family: 'Archivo Black';
   font-style: normal;
   font-weight: 400;
    color:dodgerblue;
    display: inline;
    
}

.passion{
   width:58vh;
   height: 15vh;
   display: none;

   
   position: relative;
   top: 31vh;
   left: 29.5vh;
   letter-spacing: 1vh;
   text-align: center;
   font-family: 'Titillium Web', sans-serif;
   font-style: normal;
   font-weight: 400;
   font-size:3vh;
    
}


.half_main{


width: 50%;
height:86vh;
position: absolute;
top: 7vh;
left:50%;

background-size: 100% 100%;
background-color: rgba(33,33,33,1.0);









}






















.main_1{
    
    width:100%; 
    background-color:white;
    height: 740vh;
    position: relative;
    
}




.footer{
    
    width:100%;
    background-color: black;
    height: 12vh;
    position: relative;
    
    
}


}
@keyframes puls{
0%  {width: 0vh;height: 0vh;}
100% {width:25vh;height: 25vh; }
}




@media screen and (max-width: 599px) {

.dane{
    
   width:46%;
 position: absolute;
    left:53%;

   
}
 
.name{
font-size:2vh;
    word-spacing: 2px;

	
}


      
          
.window_learn{
visibility: hidden;
    
        
    }

.web_designer{
    width:10%;
    height: :10vh;
     
   
   font-size: 5vh;
  
        
    }
    
    
    .passion{
        visibility: hidden;
    }


  

    .html_icon,.main_1{
		
		visibility:hidden;
		
	}
   
    }

  $(document).ready(function(){
 
    $(".dar_designer").fadeIn( 500,function(){
      $(".passion").show(400);
               });
            });

Jak zrobić żeby płynnie przewijało stronę bez hasztagu w hrefie

Fri, 14 Apr 2017 14:54:41 +0000

Jak zrobić żeby płynnie przewijało stronę. bez robienia hasztagu w hrefie tylko kropkę ponieważ większośc divów i nagłówków mam robione pod klasy a nie id i chciałbym żeby href był zrobiony pod klase czyli kropkę. I czy wogóle jest możliwe to a jeśli nie to czy są inne sposoby?

Jak zrobić taki efekt przewijania?

Fri, 24 Feb 2017 20:41:56 +0000

Witam.

W jaki sposób wykonać widoczny na stronie http://gardenestudio.com.br/en efekt przewijania? Chodzi mi dokładnie o to że pierwszy plan podczas scrollowania przesuwa się nieco mniej niż elementy które są za nim, co pozwoliło uzyskać efekt przestrzenności. Mam nadzieję, że wiecie o co mi chodzi :)

Dodam, że dopiero zaczynam swoją naukę programowania webowego, aczkolwiek już jestem na takim etapie, że chyba warto się dowiedzieć tego typu rzeczy. Proszę o pomoc! Z góry dzięki.

przyklejone menu

Sat, 18 Feb 2017 14:11:13 +0000

Czesc

Chcialem sie zapytac czy jest jakis sposob aby przyklejone menu plynnie przechodzilo w momencie jak zjezdzam na dol? Nie wiem czy to dobrze opisze ale chodzi po prostu o to ze w momencie kiedy zjezdzam na dol strony wszystko co znajduje sie pod moim menu strasznie przeskakuje mi strona. Pasek(menu) jest dobrze przyklejony tylko jak ustawic ta plynnosc?

Pozdrawiam

Przewijanie strony do wybranego miejsca np. diva po kliknięciu na obrazek

Sat, 24 Dec 2016 09:30:03 +0000

Witam potrzebuje prostego skryptu, do strony http://szczurownia.pl/cd/esentpie.abstrakcje.2.2015.html który po kliknięciu na obrazek zjedzie ( nawet przeskoczy ) do playera usadowionego na dole :P

Przewijanie zawartości w divach.

Sat, 13 Jun 2015 16:22:54 +0000

Cześć, wyboraźcie sobie, że macie pewną zawartość z tekstem i zdjęciami. Umieszczamy go w bloku ale chcemy miał powiedzmy 200x1000px i żeby można było w nim przewijać ta zawartość ale z ładną rolką a nie z taką którą proponuje przeglądarka. Czy jest na to sposób? :)