Как сделать отзывчивый слайдер снизу вверх, который также работает как панель навигации - PullRequest
Новая
       86

Как сделать отзывчивый слайдер снизу вверх, который также работает как панель навигации

0 голосов
/ 05 мая 2020

Прямо сейчас я работаю над созданием ползунка снизу вверх, очень похожего на этот https://tatianabilbao.com (на самом деле именно такой), который при загрузке страницы имеет c высоту и отображение описание проекта, когда проект зависает, но без изменений.

Но когда проект щелкают, я sh для панели навигации (в настоящее время div), чтобы сдвинуть вверх, чтобы занять 75% высоты экрана, затем, наконец, когда пользователь щелкает за пределами открытого ползунка, он снова сжимается до «нормального».

Наконец, я также sh, чтобы сделать ползунок / панель навигации отзывчивым , так что он подходит для смартфонов и т. д. c.

Прямо сейчас мой ползунок представляет собой просто div со столбцами и где информация отображается с эффектом переключения. При наведении курсора на слово «About» блок div расширяется, но без времени перехода или эффекта анимации, которые я пытался исправить. Сначала я подумал создать новый эффект переключения при щелчке по проекту, чтобы div расширялся / сдвигался вверх. Но думать обо всем, что бы я хотел, это кажется недальновидным решением.

Я пытался найти код для этого слайдера, но мне это очень сложно. Так что, может быть, кто-то что-то знал или делал это раньше 

let $contact = $('#contact');

$('.item').hover(function() {
  let $target = $($(this).data('target')).toggleClass('hide_default');
  $('#contact').css('color', $target.css('color'));
});


$(".item-1").hover(function(){ 
    $('#text_1_1').toggleClass('hide_default');
 }, function(){
  $('#text_1_1').toggleClass('hide_default');
});

$(".item-2").hover(function(){ 
    $('#text_2-2').toggleClass('hide_default');
 }, function(){
  $('#text_2-2').toggleClass('hide_default');
});

$(".item-3").hover(function(){ 
    $('#text_3-2').toggleClass('hide_default');
 }, function(){
  $('#text_3-2').toggleClass('hide_default');
});

$(".item-4").hover(function(){ 
    $('#text_4-2').toggleClass('hide_default');
 }, function(){
  $('#text_4-2').toggleClass('hide_default');
});

$(".item-5").hover(function(){ 
    $('#text_5-2').toggleClass('hide_default');
 }, function(){
  $('#text_5-2').toggleClass('hide_default');
});

$(".item-6").hover(function(){ 
    $('#text_6-2').toggleClass('hide_default');
 }, function(){
  $('#text_6-2').toggleClass('hide_default');
});

$(".item-7").hover(function(){ 
    $('#text_7-2').toggleClass('hide_default');
 }, function(){
  $('#text_7-2').toggleClass('hide_default');
});

$(".item-8").hover(function(){ 
    $('#text_8-2').toggleClass('hide_default');
 }, function(){
  $('#text_8-2').toggleClass('hide_default');
});

$(".item-9").hover(function(){ 
    $('#text_9-2').toggleClass('hide_default');
 }, function(){
  $('#text_9-2').toggleClass('hide_default');
});

$(".item-10").hover(function(){ 
    $('#text_10-2').toggleClass('hide_default');
 }, function(){
  $('#text_10-2').toggleClass('hide_default');
});

$(".item-11").hover(function(){ 
    $('#text_11-2').toggleClass('hide_default');
 }, function(){
  $('#text_11-2').toggleClass('hide_default');
});

$(".item-12").hover(function(){ 
    $('#text_12-2').toggleClass('hide_default');
 }, function(){
  $('#text_12-2').toggleClass('hide_default');
});

$(".item-13").hover(function(){ 
    $('#text_13-2').toggleClass('hide_default');
 }, function(){
  $('#text_13-2').toggleClass('hide_default');
});

$(".item-14").hover(function(){ 
    $('#text_14-2').toggleClass('hide_default');
 }, function(){
  $('#text_14-2').toggleClass('hide_default');
});

$(".item-15").hover(function(){ 
    $('#text_15-2').toggleClass('hide_default');
 }, function(){
  $('#text_15-2').toggleClass('hide_default');
});

$(".item-16").hover(function(){ 
    $('#text_16-2').toggleClass('hide_default');
 }, function(){
  $('#text_16-2').toggleClass('hide_default');
});
 
/* Body */

* {
  margin: auto;
  padding: 0;
}

html, body {
  margin:0;
  padding:0;
}

p {
  text-align:left;
  position: fixed;
}

/* Header */

#main{
  overflow: auto;
  margin-top: 25px;
  margin-bottom: 50px;
}

/* Contacts */

#contact{
text-align: center;
margin-bottom: 25px;
font-size: 27px;
font-family: 'Times New Roman';
color: red;
cursor: pointer;
}


#About{
margin: 50px; 
}


#container_1{
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  justify-items: center;
  grid-gap: 20px;
}

.hide_default {
  display: none;
  margin-right: 1rem;
}

/* About */

.item item-1{
  width: 50px;
}



/* Slider */

.slider {

  display: grid;
  grid-template-columns: 25% 25% 25% 25%;

  font-size: 27px;

  min-height: 150px;
  background-color: #fff;
  border-top: 1px solid #e6e6e6;
  position: fixed;
  z-index: 10001;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 18px;
  transition: transform 300ms ease-out;
}


.Project-wrapper_1{
  margin-top: 20px;
}

.Project-wrapper_2{
  margin-top: 20px;
}

.Project-wrapper_3{
  margin-top: 40px;
}
<!DOCTYPE html>
<html>
<head>
<title>Sofia Bordoni</title>

<link rel="stylesheet" type="text/css" href="stylesheet.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>

<body>


<div id="main">

		        <div id="contact">
				             Sofia Bordoni
				               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				               sofiabordoni@gmail.com  
				               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				               0045 &nbsp;9164&nbsp;6938
				               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				        <div class="item item-1">
				               About
		   				</class>
		        </div>
		              

 
<div id="container_1">

			<div class="item item-2" data-target="#text_2"><img class="Image" src="Images/SgDOoMc9ShRg0Zpr.png" width="200px"></div>

			<div class="item item-3" data-target="#text_3"><img class="Image" src="Images/Merry Christmas NC-kopi.gif" width="175px"></div>

			<div class="item item-4" data-target="#text_4"><img class="Image" src="Images/poster_mockup_MD1-kopi 2.jpg" width="250px"></div>

			<div class="item item-5" data-target="#text_5"><img class="Image" src="Images/2Tecnica_MENU_bAGLIONI_DROGHERIA_CREATIVA-kopi 2.png" width="300px"></div>

			<div class="item item-6" data-target="#text_6"><img class="Image" src="Images/Sofia_Bordoni_Portfolio_Tassinari_Vetta-7.png" width="350px"></div>

			<div class="item item-7" data-target="#text_7"><img class="Image" src="Images/Snooze Bed Linen 200x2201.png" width="250px"></div>

			<div class="item item-8" data-target="#text_8"><img class="Image" src="Images/plakat.png" width="250px"></div>

			<div class="item item-9" data-target="#text_9"> <img class="Image" src="Images/mani-sito_2.png" width="250px"> </div>

			<div class="item item-10" data-target="#text_10"><img class="Image" src="Images/Sofia_Bordoni_Portfolio-3.png" width="250px"></div>

			<div class="item item-11" data-target="#text_11"><img class="Image" src="Images/Imprint Towel 70x1402-kopi.png" width="200px"></div>

			<div class="item item-12" data-target="#text_12" ><img class="Image" src="Images/Skærmbillede 2020-04-29 kl. 11.37.09 kopi.png" width="350px"></div>

			<div class="item item-13" data-target="#text_13" ><img class="Image" src="Images/Holiday_Greeting_Main_NY-kopi.jpg" width="175px"></div>

			<div class="item item-14" data-target="#text_14" ><img class="Image" src="Images/Skærmbillede 2020-04-15 kl. 14.49.35.png" width="350px"></div>

			<div class="item item-15" data-target="#text_15" > <img class="Image" src="Images/Betafactory.gif" width="450px"></div>

			<div class="item item-16" data-target="#text_16" ><img class="Image" src="Images/330393_Normann_Copenhagen_Christmas_Candle_2018_Black_01.png" width="150px"></div>
	
	</div>
</div>

<div class="slider" style="max-height: 200vh max-height:70px;">


	<div class="nav-item column column-1">

			<div class="Project-wrapper_1">

					<div id="contact">						
						Menu
					</div>

			</div>

	</div>

	<div class="nav-item column column-2">

		<div class="Project-wrapper_2">

					<div id="text_1_1" class="hide_default" style="color: #3333ff">
																	
						I love the memory of my childhood, that was full of colors, paper, pencils, and handcraft works. Developing an obsession towards various creative fields. Photography, developing analog photos. Architecture, seeing buildings as shapes, volumes and material combinations. Typography, as well as observing letters as shapes with an entrenched character. Upon realizing that graphic design is the field that was capable to bring together all of these passions I followed them with enthusiasm.
				  	</div>


				  	 <div id="text_2" class="hide_default" style="color: blue">						
					Category: Objects
					</div>


					 <div id="text_3" class="hide_default" style="color: #ff6699">				
					Category: Objects
		  			</div>


		  			<div id="text_4" class="hide_default" style="color: #00cc66">				
					Category: Campaign
		  			</div>

		  			<div id="text_5" class="hide_default" style="color: #33cc33">					
					Category: Editorial design.
		  			</div>

		  			<div id="text_6" class="hide_default" style="color: #9966ff">					
					Category: Textile design.
		  			</div>

		  			<div id="text_7" class="hide_default" style="color:#00cc66">	
					Category: Campaign
		  			</div>

		  			<div id="text_8" class="hide_default" style="color: #3399ff">				
					Category: Campaign
		  			</div>

		  			<div id="text_9" class="hide_default" style="color: #00cc99">				
					Category: Campaign
		  			</div>

		  			<div id="text_10" class="hide_default" style="color: #ff9900">				
					Category: Campaign
		  			</div>

		  			<div id="text_11" class="hide_default" style="color: #3366ff">				
					Category: Textile
		  			</div>

		  			<div id="text_12" class="hide_default" style="color:#ffff00">				
					Category: Campaign.
		  			</div>

		  			<div id="text_13" class="hide_default" style="color: #056bfa">				
					Category: Objects.
		  			</div>

		  			<div id="text_14" class="hide_default" style="color: #056bfa">				
					Category: Art Direction.
		  			</div>

		  			<div id="text_15" class="hide_default" style="color: #5b4191">						
					Category: Art Direction
					</div>

					<div id="text_16" class="hide_default" style="color: #32a852">						
					Category: Objects
					</div>
		</div>

	</div>

	<div class="nav-item column column-3">

		<div class="Project-wrapper_3">

			<div  class="hide_default" id="text_2-2" style="color: blue">
						Project: Christmas Collection 2019
						<br>
						2019
						</div>

						<div  class="hide_default" id="text_3-2" style="color: #ff6699">
						Project: Christmas Collection 
						<br>
						2019
						</div>

						</p>

						<div class="hide_default" id="text_4-2" style="color: #00cc66">		
						Project: Copenhagen Architecture Festival.
						<br>
						2018
	  					</div>

	  					<div class="hide_default" id="text_5-2" style="color: #33cc33">		
						Project: Varier Catalogue 2017.
						<br>
						2017
						</div>


	  					<div  class="hide_default" id="text_6-2" style="color: #9966ff">		
						Project: Baglioni Hotels.
	  					<br>
						2017
						</div>

						<div class="hide_default" id="text_7-2" style="color:#00cc66">		
						Project: Normann Copenhagen Textile collection 2019.
	  					<br>
						2019
						</div>

						<div class="hide_default" id="text_8-2" style="color: #3399ff">		
						Project: Museo di Storia Naturale.
	  					<br>
						2016
						</div>

						<div class="hide_default" id="text_9-2" style="color: #00cc99">		
						Project: Baglioni Hotels.
	  					<br>
						2017
						</div>

						<div class="hide_default" id="text_10-2" style="color: #ff9900">		
						Project: Hay Kitchen Market.
	  					<br>
						2017
						</div>

						<div class="hide_default" id="text_11-2" style="color: #3366ff">		
						Project: Normann Copenhagen Textile collection 2019.
	  					<br>
						2019
						</div>

						<div class="hide_default" id="text_12-2" style="color:#ffff00">		
						Project: Normann Copenhagen Christmas Collection 2019
						<br>
						2019
						</div>

						<div class="hide_default" id="text_13-2" style="color: #056bfa">		
						Project: Normann Copenhagen Christmas Collection 2019
						<br>
						2019
						</div>

						<div class="hide_default" id="text_14-2" style="color: #056bfa">		
						Project: Baglioni Hotels.
	  					<br>
						2017
						</div>

						<div class="hide_default" id="text_15-2" style="color: #5b4191">		
						Project: Beta factory
						<br>
						2019
						</div>

						<div class="hide_default" id="text_16-2" style="color: #32a852">		
						Project: Normann Copenhagen Christmas Collection 2019
						<br>
						2019
						</div>

			</div>
		</div>

	<div class="nav-item column column-3">


	</div>



			</div>

				<script src="Onhover.js"></script>
				<script src="HoverColor.js"></script>
			</body>

			</html>

?

...