Как запустить анимацию SVG за всем содержимым моей веб-страницы? - PullRequest
Новая
       6

Как запустить анимацию SVG за всем содержимым моей веб-страницы?

1 голос
/ 17 октября 2019 

html {
  scroll-behavior: smooth;
}

body {
  background: #181818;
  color: #fff;
}

.navbar {
  background: #181818;
  margin-top: 10px;
  box-shadow: 5px 5px 10px #050505;
  border-left: #E2007C solid;
  border-right: #476dc5 solid;
}

.nav-brand h1 {
  color: #fff;
  text-decoration: none;
}

.nav-item {
  color: #fff;
  font-size: 15px;
  border: 2px solid transparent;
  transition: all ease-in-out 0.3s;
}

.nav-item:hover {
  box-shadow: 5px 5px 10px #050505;
  font-size: 16.5px;
}

#searchbar {
  background-color: #131313;
  border: transparent;
  padding: 10px;
  color: #fff;
  box-sizing: border-box;
  position: relative;
  width: 200px;
  outline: none;
  transition: all ease-in-out 0.3s;
}

.underline {
  background-color: #E2007C;
  display: block;
  height: 2px;
  position: relative;
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
  width: 302px;
}

#searchbar:focus+.underline {
  transform: scale(1);
}

#searchbar:focus {
  width: 300px;
}

.fa-angle-double-down {
  font-size: 40px;
  animation-name: upDown;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

section {
  margin: 3%;
  padding: 2%;
}

.column {
  flex: 1;
}

.introPara {
  padding: 10%;
  font-size: 20px;
}

.introPara p,
h1,
h6 {
  padding: 0;
}

.introPara hr {
  background-color: #E2007C;
  width: 50%;
  height: 5px;
  margin: 10px 0;
  border: none;
}

.boxed {
  box-shadow: 5px 5px 10px #050505;
}

.highlight-pink {
  color: #E2007C;
  font: bold;
  padding: 5px;
}

.highlight-blue {
  color: #476dc5;
  font: bold;
  padding: 5px;
}

.highlight-green {
  color: $themegreen;
  font: bold;
  padding: 5px;
}

.circAnimte {
  z-index: -1;
}

circle {
  fill: none;
  stroke-width: 3.5;
  animation-name: preloader;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  transform-origin: 250px 230px;
  will-change: transform;
}

@for $i from 1 through 5 {
  circle:nth-of-type(#{$i}) {
    animation-delay: #{$i * 0.25}s;
  }
}

@keyframes preloader {
  0% {
    transform: rotate(360deg) skewX(-30deg) skewY(30deg);
  }
  50% {
    transform: skewX(90deg) skewY(90deg);
  }
  100% {
    transform: skewX(-30deg) skewY(30deg);
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>My Page</title>
  <link rel="stylesheet" href="css/main.scss" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>

<body>
  <div class="container-fluid">
    <div class="column circAnimate">
      <svg viewBox="0 0 600 500" preserveAspectRatio="none">
                    <circle cx="250" cy="230" r="160" stroke="#E2007C"/>
                    <circle cx="250" cy="230" r="135" stroke="#0CCE6B"/>
                    <circle cx="250" cy="230" r="110" stroke="#476dc5"/>
                    <circle cx="250" cy="230" r="85" stroke="#0CCE6B"/>
                    <circle cx="250" cy="230" r="55" stroke="#E2007C"/>
                </svg>
    </div>
    <header>
      <nav class="navbar navbar-expand-lg navbar-fixed-top">
        <div class="navbar-nav">
          <a class="nav-item nav-link p-3" href="index.html">Home</a>
          <a class="nav-item nav-link p-3" href="#">Contact Me</a>
        </div>
        <div class="ml-auto">
          <input id="searchbar" type="search" placeholder="Search" />
          <!-- Span class below is for animated underline on the searchbar -->
          <span class="underline"></span>
        </div>
      </nav>
    </header>

    <section>
      <div class="row">
        <div class="column introPara">
          <p>Welcome to my Website</p>
          <hr/>
          <h1>Ryan Kuruppu</h1>

          <!-- h6 section can be improved using only CSS but for now its coded using utf-8 symbols -->
          <h6>&#x276E; &nbsp; <span class="highlight-blue">Web Developer</span> &nbsp; &#x276E; &nbsp; &nbsp; <span class="highlight-green"> Mobile App Developer</span> &nbsp; &#x276F; &nbsp; &nbsp; <span class="highlight-purple">Application Dev</span>&nbsp;
            &#x276F;
          </h6>
          <p>Undergraduate student at the <span class="highlight-blue boxed">Informatics Institute of Technology</span></p>
          <p>BSc(Hons) Computer Science</p>
        </div>
      </div>
      <div class="row">
        <div class="ml-auto mr-auto">
          <a href="#section2"><i class="fas fa-angle-double-down"></i></a>
        </div>
      </div>
    </section>
  </div>
</body>

</html>

Я пытаюсь получить анимацию вверху позади всего содержимого моего контейнера div. Я все еще не знаю, как это сделать. Я пытался использовать свойство z-index, но чувствую, что использую его неправильно. Я использую scss без какого-либо javascript и надеюсь, что смогу сохранить его таким образом. Несмотря на. Я открыт для любых решений.

Ответы [ 3 ]

2 голосов
/ 17 октября 2019

Вам необходимо установить z-индекс svg как -1, а позиция должна быть абсолютной, а z-индекс раздела / текста, который вы хотите отобразить, как 1.

Попробуйте это. надеюсь, это поможет. 

html {
  scroll-behavior: smooth;
}

body {
  background: #181818;
  color: #fff;
}

.navbar {
  background: #181818;
  margin-top: 10px;
  box-shadow: 5px 5px 10px #050505;
  border-left: #E2007C solid;
  border-right: #476dc5 solid;
}

.nav-brand h1 {
  color: #fff;
  text-decoration: none;
}

.nav-item {
  color: #fff;
  font-size: 15px;
  border: 2px solid transparent;
  transition: all ease-in-out 0.3s;
}

.nav-item:hover {
  box-shadow: 5px 5px 10px #050505;
  font-size: 16.5px;
}

#searchbar {
  background-color: #131313;
  border: transparent;
  padding: 10px;
  color: #fff;
  box-sizing: border-box;
  position: relative;
  width: 200px;
  outline: none;
  transition: all ease-in-out 0.3s;
}

.underline {
  background-color: #E2007C;
  display: block;
  height: 2px;
  position: relative;
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
  width: 302px;
}

#searchbar:focus+.underline {
  transform: scale(1);
}

#searchbar:focus {
  width: 300px;
}

.fa-angle-double-down {
  font-size: 40px;
  animation-name: upDown;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

section {
  margin: 3%;
  padding: 2%;
  position: relative;
  z-index: 1;
}

.column.circAnimate svg {
  z-index: -1;
  position: absolute;
}

.column {
  flex: 1;
}

.introPara {
  padding: 10%;
  font-size: 20px;
}

.introPara p,
h1,
h6 {
  padding: 0;
}

.introPara hr {
  background-color: #E2007C;
  width: 50%;
  height: 5px;
  margin: 10px 0;
  border: none;
}

.boxed {
  box-shadow: 5px 5px 10px #050505;
}

.highlight-pink {
  color: #E2007C;
  font: bold;
  padding: 5px;
}

.highlight-blue {
  color: #476dc5;
  font: bold;
  padding: 5px;
}

.highlight-green {
  color: $themegreen;
  font: bold;
  padding: 5px;
}

.circAnimte {
  z-index: -1;
}

circle {
  fill: none;
  stroke-width: 3.5;
  animation-name: preloader;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  transform-origin: 250px 230px;
  will-change: transform;
}

@for $i from 1 through 5 {
  circle:nth-of-type(#{$i}) {
    animation-delay: #{$i * 0.25}s;
  }
}

@keyframes preloader {
  0% {
    transform: rotate(360deg) skewX(-30deg) skewY(30deg);
  }
  50% {
    transform: skewX(90deg) skewY(90deg);
  }
  100% {
    transform: skewX(-30deg) skewY(30deg);
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>My Page</title>
  <link rel="stylesheet" href="css/main.scss" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>

<body>
  <div class="container-fluid">
    <div class="column circAnimate">
      <svg viewBox="0 0 600 500" preserveAspectRatio="none">
                        <circle cx="250" cy="230" r="160" stroke="#E2007C"/>
                        <circle cx="250" cy="230" r="135" stroke="#0CCE6B"/>
                        <circle cx="250" cy="230" r="110" stroke="#476dc5"/>
                        <circle cx="250" cy="230" r="85" stroke="#0CCE6B"/>
                        <circle cx="250" cy="230" r="55" stroke="#E2007C"/>
                    </svg>
    </div>
    <header>
      <nav class="navbar navbar-expand-lg navbar-fixed-top">
        <div class="navbar-nav">
          <a class="nav-item nav-link p-3" href="index.html">Home</a>
          <a class="nav-item nav-link p-3" href="#">Contact Me</a>
        </div>
        <div class="ml-auto">
          <input id="searchbar" type="search" placeholder="Search" />
          <!-- Span class below is for animated underline on the searchbar -->
          <span class="underline"></span>
        </div>
      </nav>
    </header>

    <section>
      <div class="row">
        <div class="column introPara">
          <p>Welcome to my Website</p>
          <hr/>
          <h1>Ryan Kuruppu</h1>

          <!-- h6 section can be improved using only CSS but for now its coded using utf-8 symbols -->
          <h6>&#x276E; &nbsp; <span class="highlight-blue">Web Developer</span> &nbsp; &#x276E; &nbsp; &nbsp; <span class="highlight-green"> Mobile App Developer</span> &nbsp; &#x276F; &nbsp; &nbsp; <span class="highlight-purple">Application Dev</span>&nbsp;
            &#x276F;
          </h6>
          <p>Undergraduate student at the <span class="highlight-blue boxed">Informatics Institute of Technology</span></p>
          <p>BSc(Hons) Computer Science</p>
        </div>
      </div>
      <div class="row">
        <div class="ml-auto mr-auto">
          <a href="#section2"><i class="fas fa-angle-double-down"></i></a>
        </div>
      </div>
    </section>
  </div>
</body>

</html>
1 голос
/ 17 октября 2019

Просто нужно немного CSS. 

<style>
.column.circAnimation{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
</style>
0 голосов
/ 17 октября 2019 

.container_others {
  position: absolute;
  top:0;
  left:0;
  width: 100vw;
}

Переведите других в другой элемент div и напишите этот код.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...