css - 部分内容随背景缩放

Question

我试图阻止我的部分内容随我的部分背景缩放。背景的比例是完美的，但它似乎也使内容缩放，我正在使用 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>

Answer 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>