Animowany content za pomocą funckji „target” CSS

Demo:

Heading One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt. Praesent purus turpis, consectetur quis congue vel, pulvinar at lorem. Vivamus varius condimentum dolor, quis ultricies ipsum porta quis.

Heading Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt. Praesent purus turpis, consectetur quis congue vel, pulvinar at lorem. Vivamus varius condimentum dolor, quis ultricies ipsum porta quis.

Heading Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt. Praesent purus turpis, consectetur quis congue vel, pulvinar at lorem. Vivamus varius condimentum dolor, quis ultricies ipsum porta quis.

Heading Four

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt. Praesent purus turpis, consectetur quis congue vel, pulvinar at lorem. Vivamus varius condimentum dolor, quis ultricies ipsum porta quis.

Heading Five

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt. Praesent purus turpis, consectetur quis congue vel, pulvinar at lorem. Vivamus varius condimentum dolor, quis ultricies ipsum porta quis.

Heading Six

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt. Praesent purus turpis, consectetur quis congue vel, pulvinar at lorem. Vivamus varius condimentum dolor, quis ultricies ipsum porta quis.

Heading Seven

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt. Praesent purus turpis, consectetur quis congue vel, pulvinar at lorem. Vivamus varius condimentum dolor, quis ultricies ipsum porta quis.

Bardzo przydatna funkcja css target pozwalająca na swobodną nawigację i płynne przewijanie materiałów na stronie. Używamy wyłącznie składni HTML oraz stylów CSS.

Budowa strony

Nasza strona jest bardzo prosto zbudowana. Konstrukcja zawiera wyłącznie pasek nawigacyjny, oraz treść.
Pasek nawigacyjny:

<navi class="ewd_target-container">
		<ul>
			<li><a href="#one">One</a></li>
			<li><a href="#two">Two</a></li>
			<li><a href="#three">Three</a></li>
			<li><a href="#four">Four</a></li>
			<li><a href="#five">Five</a></li>
			<li><a href="#six">Six</a></li>
			<li><a href="#seven">Seven</a></li>
		</ul>
	</navi>

Zawartość tekstowa strony:

 <div id="ewd_target-container">
	    
	    <h1 id="one">Heading One</h1>
	    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt. Praesent purus turpis, consectetur quis congue vel, pulvinar at lorem. Vivamus varius condimentum dolor, quis ultricies ipsum porta quis. </p>
	    
	    <h1 id="two">Heading Two</h1>
	    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt. Praesent purus turpis, consectetur quis congue vel, pulvinar at lorem. Vivamus varius condimentum dolor, quis ultricies ipsum porta quis. </p>
	    
	    <h1 id="three">Heading Three</h1>
	    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt. Praesent purus turpis, consectetur quis congue vel, pulvinar at lorem. Vivamus varius condimentum dolor, quis ultricies ipsum porta quis. </p>
	    
	    <h1 id="four">Heading Four</h1>
	    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt. Praesent purus turpis, consectetur quis congue vel, pulvinar at lorem. Vivamus varius condimentum dolor, quis ultricies ipsum porta quis. </p>
	    
	    <h1 id="five">Heading Five</h1>
	    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt. Praesent purus turpis, consectetur quis congue vel, pulvinar at lorem. Vivamus varius condimentum dolor, quis ultricies ipsum porta quis. </p>
	    
	    <h1 id="six">Heading Six</h1>
	    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt. Praesent purus turpis, consectetur quis congue vel, pulvinar at lorem. Vivamus varius condimentum dolor, quis ultricies ipsum porta quis. </p>
	    
	    <h1 id="seven">Heading Seven</h1>
	    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt. Praesent purus turpis, consectetur quis congue vel, pulvinar at lorem. Vivamus varius condimentum dolor, quis ultricies ipsum porta quis. </p>
	</div>

Jedyne na co należny zwrócić uwagę przy składaniu struktury strony, to href w znacznikach a id oraz h1. Muszą one być takie same, aby wiedzieć do czego ma się odwoływać nasze pozycje z paska nawigacyjnego. Mając już taką strukturę, nawet bez żadnego stylu css powyższy skrypt powinien działać prawidłowo.

Style CSS

	#ewd_target-container {
		width: 700px;
		margin: 50px auto;
	}
	
	p {
		font: 14px/1.8 Helvetica, Verdana, sans-serif;
		margin-bottom: 50px;
	}
	
	#ewd_target-container h1 {
		font: bold 30px/1.5 Calibri;
	}
	
	.ewd_target-container ul {
		list-style: none;
		overflow: hidden;
		margin: 0 auto;
		padding:0;
		display:table;
		text-align:center;
	}
	navi.ewd_target-container
	{
		position: fixed;
		width: 100%;
		bottom: 0px;
		margin:0;
		padding:0px;
		background:#008ed6;
		height:30px;
		
	}
	.ewd_target-container ul a {
		color: #f0f0f0;
		text-decoration: none;
		height:30px;
		line-height:30px;
		font-size:15px;
		text-transform:uppercase;
	}
	
	.ewd_target-container li {

		margin-right: 30px;
		font: 14px/1.8 Helvetica, Verdana, sans-serif;
		float:left;
		
	}
	
	
	#ewd_target-container h1:target {
		font-size: 50px;
		text-decoration: none;
		color: #008ed6;
	}
	#ewd_target-container h1:target::before
	{
	content: "\2638";
	color:	#003399;
	font-size:40px;
	}

	#ewd_target-container p {
  padding: 10px;
  transition: all 0.5s ease;     
  padding-right: 50px;
  margin-left: -20px;    
border-bottom:3px solid #fff;
}
	
	#ewd_target-container h1:target + p {
		background: #f7f7f7;
		padding: 10px;
		  border-bottom:3px solid #555;
	}

Większość z tych linii nie ma znaczenia dla działania naszego skryptu. Jednak dla większości użytkowników wygląd ma znaczenie.
Najważniejsze jednak linie kodu naszego css to oczywiście te z polem target.

#ewd_target-container h1:target {
		font-size: 50px;
		text-decoration: none;
		color: #008ed6;
	}
#ewd_target-container h1:target::before
	{
	content: "\2638";
	color:	#003399;
	font-size:40px;
	}

Dla znacznika h1, który aktualnie jest aktywny dopisane są powyższe style.

#ewd_target-container h1:target + p {
		background: #f7f7f7;
		padding: 10px;
		  border-bottom:3px solid #555;
	}

Również możemy tą samą zasadę zastosować do potomnych elementów znacznika h1. A więc dla aktywnego h1 można dodać „+” i dopisać style w tym przypadku dla znacznika p.
Pozostałe elementy moich stylów to już wyłącznie estetyka, którą można oczywiście dowolnie modyfikować.
Zapraszam również do artykułu Animacje CSS, którego tematyka jest bardzo zbliżona.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

CAPTCHA
Change the CAPTCHA codeSpeak the CAPTCHA code