部分内容缩放与背景

时间:2018-06-05 21:22:52

标签: css3

我正在尝试使用我的部分背景来阻止我的部分内容缩放。背景的规模是完美的,但它似乎也使内容规模,我使用gsap库我尝试在部分内创建一个容器,并给它绝对,但我没有做什么阻止内部缩放

//First the variables our app is going to use need to be declared

	//References to DOM elements
	var $window = $(window);
	var $document = $(document);
	//Only links that starts with #
	var $navButtons = $("nav a").filter("[href^=#]");
	var $navGoPrev = $(".go-prev");
	var $navGoNext = $(".go-next");
	var $sectionsContainer = $(".sections-container");
	var $sections = $(".section");
	var $currentSection = $sections.first();

	//Animating flag - is our app animating
	var isAnimating = false;

	//The height of the window
	var pageHeight = $window.innerHeight();

	//Key codes for up and down arrows on keyboard. We'll be using this to navigate change sections using the keyboard
	var keyCodes = {
		UP  : 38,
		DOWN: 40
	}

	//Going to the first section
	goToSection($currentSection);


	/*
	*   Adding event listeners
	* */

	$window.on("resize", onResize).resize();
	$window.on("mousewheel DOMMouseScroll", onMouseWheel);
	$document.on("keydown", onKeyDown);
	$navButtons.on("click", onNavButtonClick);
	$navGoPrev.on("click", goToPrevSection);
	$navGoNext.on("click", goToNextSection);

	/*
	*   Internal functions
	* */


	/*
	*   When a button is clicked - first get the button href, and then section to the container, if there's such a container
	* */
	function onNavButtonClick(event)
	{
		//The clicked button
		var $button = $(this);

		//The section the button points to
		var $section = $($button.attr("href"));

		//If the section exists, we go to it
		if($section.length)
		{
			goToSection($section);
			event.preventDefault();
		}
	}

	/*
	*   Getting the pressed key. Only if it's up or down arrow, we go to prev or next section and prevent default behaviour
	*   This way, if there's text input, the user is still able to fill it
	* */
	function onKeyDown(event)
	{

		var PRESSED_KEY = event.keyCode;

		if(PRESSED_KEY == keyCodes.UP)
		{
			goToPrevSection();
			event.preventDefault();
		}
		else if(PRESSED_KEY == keyCodes.DOWN)
		{
			goToNextSection();
			event.preventDefault();
		}

	}

	/*
	*   When user scrolls with the mouse, we have to change sections
	* */
	function onMouseWheel(event)
	{
		//Normalize event wheel delta
		var delta = event.originalEvent.wheelDelta / 30 || -event.originalEvent.detail;

		//If the user scrolled up, it goes to previous section, otherwise - to next section
		if(delta < -1)
		{
			goToNextSection();
		}
		else if(delta > 1)
		{
			goToPrevSection();
		}

		event.preventDefault();
	}

	/*
	*   If there's a previous section, section to it
	* */
	function goToPrevSection()
	{
		if($currentSection.prev().length)
		{
			goToSection($currentSection.prev());
		}
	}

	/*
	*   If there's a next section, section to it
	* */
	function goToNextSection()
	{
		if($currentSection.next().length)
		{
			goToSection($currentSection.next());
		}
	}

	/*
	*   Actual transition between sections
	* */
	function goToSection($section)
	{
		//If the sections are not changing and there's such a section
		if(!isAnimating && $section.length)
		{
			//setting animating flag to true
			isAnimating = true;
      
      
      
   

			//Sliding to current section
            TweenLite.set($currentSection, {autoAlpha: 0, display: 'none'});
      
			$currentSection = $section;
      
            TweenLite.set($currentSection, {display: 'block'});
			TweenLite.fromTo($currentSection, 0.6, {scale: 0.9, autoAlpha: 0}, {scale: 1, autoAlpha: 1, ease: Power1.easeOut, onComplete: onSectionChangeEnd, onCompleteScope: this});
      
      
    

			//Animating menu items
			TweenLite.to($navButtons.filter(".active"), 0.5, {className: "-=active"});

			TweenLite.to($navButtons.filter("[href=#" + $currentSection.attr("id") + "]"), 0.5, {className: "+=active"});

		}
	}

	/*
	*   Once the sliding is finished, we need to restore "isAnimating" flag.
	*   You can also do other things in this function, such as changing page title
	* */
	function onSectionChangeEnd()
	{
		isAnimating = false;
	}

	/*
	*   When user resize it's browser we need to know the new height, so we can properly align the current section
	* */
	function onResize(event)
	{

		//This will give us the new height of the window
		var newPageHeight = $window.innerHeight();

		/*
		*   If the new height is different from the old height ( the browser is resized vertically ), the sections are resized
		* */
		if(pageHeight !== newPageHeight)
		{
			pageHeight = newPageHeight;

			//This can be done via CSS only, but fails into some old browsers, so I prefer to set height via JS
			TweenLite.set([$sectionsContainer, $sections], {height: pageHeight + "px"});

			//The current section should be always on the top
			TweenLite.set($sectionsContainer, {scrollTo: {y: pageHeight * $currentSection.index() }});
		}

	}
body, div, p {
	margin: 0;
	padding: 0;
}
body {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: 300;
	letter-spacing: 0.0625em;
	background-color: #000;
}


h1{
	color: #fff;
}


.sections-container {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 10;
}

.section {
   position: absolute;
   width: 100%;
	height: 100%;
	overflow: hidden;
  display: none;
  visibility: hidden;
  opacity: 0;
}

#section-1 {
  display: block;
  visibility: visible;
  opacity: 1;
}

.section .centered h1 {
	text-align: center;
}
.section .centered p {
	text-align: center;
}
#section-1 {
	background-color: #5A4748;
}
#section-2 {
	background-color: #45959b;
}
#section-3 {
	background-color: #778899;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>	
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>	
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script>	



<div class="sections-container">
	
	
    <div class="section" id="section-1">
   		<div class="centered">
            <h1>1</h1>            
        </div>
    </div>
	
	
    <div class="section" id="section-2">
        <div class="centered">
            <h1>2</h1>            
        </div>
    </div>
	
	
    <div class="section" id="section-3">
        <div class="centered">
            <h1>3</h1>
        </div>
    </div>	
	
</div>

1 个答案:

答案 0 :(得分:1)

这会是你想要的吗?我基本上添加了一个背景div

<div id="background"></div>

#background {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: block;
  visibility: visible;
  opacity: 1;
}

根据当前可见的部分分配背景类。

var $background = $("#background");

...

$background.classList = "";

TweenLite.set($background, {
  className: '+=bg-' + ($sections.index($currentSection) + 1)
});

TweenLite.fromTo($background, 0.6, {
  scale: 0.9,
  autoAlpha: 0
}, {
  scale: 1,
  autoAlpha: 1,
  ease: Power1.easeOut,
  onComplete: onSectionChangeEnd,
  onCompleteScope: this
});

如果您愿意,可以选择删除部分编号上的autoAlpha补间。

//First the variables our app is going to use need to be declared

//References to DOM elements
var $window = $(window);
var $document = $(document);
//Only links that starts with #
var $navButtons = $("nav a").filter("[href^=#]");
var $navGoPrev = $(".go-prev");
var $navGoNext = $(".go-next");
var $sectionsContainer = $(".sections-container");
var $sections = $(".section");
var $background = $("#background");
var $currentSection = $sections.first();

//Animating flag - is our app animating
var isAnimating = false;

//The height of the window
var pageHeight = $window.innerHeight();

//Key codes for up and down arrows on keyboard. We'll be using this to navigate change sections using the keyboard
var keyCodes = {
  UP: 38,
  DOWN: 40
}

//Going to the first section
goToSection($currentSection);


/*
 *   Adding event listeners
 * */

$window.on("resize", onResize).resize();
$window.on("mousewheel DOMMouseScroll", onMouseWheel);
$document.on("keydown", onKeyDown);
$navButtons.on("click", onNavButtonClick);
$navGoPrev.on("click", goToPrevSection);
$navGoNext.on("click", goToNextSection);

/*
 *   Internal functions
 * */


/*
 *   When a button is clicked - first get the button href, and then section to the container, if there's such a container
 * */
function onNavButtonClick(event) {
  //The clicked button
  var $button = $(this);

  //The section the button points to
  var $section = $($button.attr("href"));

  //If the section exists, we go to it
  if ($section.length) {
    goToSection($section);
    event.preventDefault();
  }
}

/*
 *   Getting the pressed key. Only if it's up or down arrow, we go to prev or next section and prevent default behaviour
 *   This way, if there's text input, the user is still able to fill it
 * */
function onKeyDown(event) {

  var PRESSED_KEY = event.keyCode;

  if (PRESSED_KEY == keyCodes.UP) {
    goToPrevSection();
    event.preventDefault();
  } else if (PRESSED_KEY == keyCodes.DOWN) {
    goToNextSection();
    event.preventDefault();
  }

}

/*
 *   When user scrolls with the mouse, we have to change sections
 * */
function onMouseWheel(event) {
  //Normalize event wheel delta
  var delta = event.originalEvent.wheelDelta / 30 || -event.originalEvent.detail;

  //If the user scrolled up, it goes to previous section, otherwise - to next section
  if (delta < -1) {
    goToNextSection();
  } else if (delta > 1) {
    goToPrevSection();
  }

  event.preventDefault();
}

/*
 *   If there's a previous section, section to it
 * */
function goToPrevSection() {
  console.log($currentSection.prev().length > 0);
  if ($currentSection.prev().length) {
    goToSection($currentSection.prev());
  }
}

/*
 *   If there's a next section, section to it
 * */
function goToNextSection() {
  if ($currentSection.next().length > 0) {
    goToSection($currentSection.next());
  }
}

/*
 *   Actual transition between sections
 * */
function goToSection($section) {
  //If the sections are not changing and there's such a section
  if (!isAnimating && $section.length) {
    //setting animating flag to true
    isAnimating = true;

    //Sliding to current section
    TweenLite.set($currentSection, {
      autoAlpha: 0,
      display: 'none'
    });

    $currentSection = $section;
    $background.classList = "";

    TweenLite.set($currentSection, {
      display: 'block'
    });
    TweenLite.set($background, {
      className: 'bg-' + ($sections.index($currentSection) + 1)
    });
    //console.log($sections.index($currentSection) + 1);
    TweenLite.fromTo($background, 0.6, {
      scale: 0.9,
      autoAlpha: 0
    }, {
      scale: 1,
      autoAlpha: 1,
      ease: Power1.easeOut,
      onComplete: onSectionChangeEnd,
      onCompleteScope: this
    });
    TweenLite.fromTo($currentSection, 0.6, {
      autoAlpha: 0
    }, {
      autoAlpha: 1,
      ease: Power1.easeOut,
    });
    

    //Animating menu items
    TweenLite.to($navButtons.filter(".active"), 0.5, {
      className: "-=active"
    });

    TweenLite.to($navButtons.filter("[href=#" + $currentSection.attr("id") + "]"), 0.5, {
      className: "+=active"
    });

  }
}

/*
 *   Once the sliding is finished, we need to restore "isAnimating" flag.
 *   You can also do other things in this function, such as changing page title
 * */
function onSectionChangeEnd() {
  isAnimating = false;
}

/*
 *   When user resize it's browser we need to know the new height, so we can properly align the current section
 * */
function onResize(event) {

  //This will give us the new height of the window
  var newPageHeight = $window.innerHeight();

  /*
   *   If the new height is different from the old height ( the browser is resized vertically ), the sections are resized
   * */
  if (pageHeight !== newPageHeight) {
    pageHeight = newPageHeight;

    //This can be done via CSS only, but fails into some old browsers, so I prefer to set height via JS
    TweenLite.set([$sectionsContainer, $sections], {
      height: pageHeight + "px"
    });

    //The current section should be always on the top
    TweenLite.set($sectionsContainer, {
      scrollTo: {
        y: pageHeight * $currentSection.index()
      }
    });
  }

}
body,
div,
p {
  margin: 0;
  padding: 0;
}

body {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
  letter-spacing: 0.0625em;
  background-color: #000;
}

h1 {
  color: #fff;
}

.sections-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 10;
}

.section {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: none;
  visibility: hidden;
  opacity: 0;
}

#section-1 {
  display: block;
  visibility: visible;
  opacity: 1;
}

.section .centered h1 {
  text-align: center;
}

.section .centered p {
  text-align: center;
}

#background {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: block;
  visibility: visible;
  opacity: 1;
}

.bg-1 {
  background-color: #5A4748;
}

.bg-2 {
  background-color: #45959b;
}

.bg-3 {
  background-color: #778899;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script>


<div id="background"></div>
<div class="sections-container">

  <div class="section" id="section-1">
    <div class="centered">
      <h1>1</h1>
    </div>
  </div>


  <div class="section" id="section-2">
    <div class="centered">
      <h1>2</h1>
    </div>
  </div>


  <div class="section" id="section-3">
    <div class="centered">
      <h1>3</h1>
    </div>
  </div>

</div>