Guest User

Scrolling Effect

a guest
May 3rd, 2021
14
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. HTML:
  2.  
  3. <!DOCTYPE html>
  4. <html lang="en">
  5.  
  6. <head>
  7. <meta charset="UTF-8">
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9. <link rel="stylesheet" href="style.css">
  10. <title>Meine Website</title>
  11. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  12. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.2/circle-progress.min.js"></script>
  13. </head>
  14.  
  15. <body>
  16. <!-- Header -->
  17. <section id="header">
  18. <div class="header container">
  19. <div class="nav-bar">
  20. <div class="brand">
  21. <a href="#hero">
  22. <h1><span>H</span>is <span>J</span>els</h1>
  23. </a>
  24. </div>
  25. <div class="nav-list">
  26. <div class="dings">
  27. <div class="bar"></div>
  28. </div>
  29. <ul>
  30. <li><a href="#hero" data-after="Home">Home</a></li>
  31. <li><a href="#services" data-after="Service">Skills</a></li>
  32. <li><a href="#about" data-after="About">About</a></li>
  33. <li><a href="#Lieblingslieder" data-after="Lieblingslieder">Lieblingslieder</a></li>
  34. <li><a href="#contact" data-after="Contact">Kontakt</a></li>
  35. </ul>
  36. </div>
  37. </div>
  38. </div>
  39. </section>
  40. <!-- End Header -->
  41.  
  42.  
  43. <!-- Hero Section -->
  44. <section id="hero">
  45. <div class="hero container">
  46. <div>
  47. <h1>Hallo, <span></span></h1>
  48. <h1>Ich bin Jels <span></span></h1>
  49. <a href="#contact" type="button" class="cta">Kontakt</a>
  50. </div>
  51. </div>
  52. </section>
  53. <!-- End Hero Section -->
  54.  
  55. <!-- Service Section -->
  56. <section id="services">
  57. <div class="wrapper">
  58. <div class="card">
  59. <div class="circle">
  60. <div class="bar"></div>
  61. <div class="box"><span></span></div>
  62. </div>
  63. <div class="text">HTML & CSS</div>
  64. </div>
  65. <div class="card js">
  66. <div class="circle">
  67. <div class="bar"></div>
  68. <div class="box"><span></span></div>
  69. </div>
  70. <div class="text">JavaScript</div>
  71. </div>
  72. <div class="card react">
  73. <div class="circle">
  74. <div class="bar"></div>
  75. <div class="box"><span></span></div>
  76. </div>
  77. <div class="text">React JS</div>
  78. </div>
  79. </div>
  80.  
  81. <script>
  82. let options = {
  83. startAngle: -1.55,
  84. size: 150,
  85. value: 0.85,
  86. fill: {gradient: ['#a445b2', '#fa4299']}
  87. }
  88. $(".circle .bar").circleProgress(options).on('circle-animation-progress',
  89. function(event, progress, stepValue){
  90. $(this).parent().find("span").text(String(stepValue.toFixed(2).substr(2)) + "%");
  91. });
  92. $(".js .bar").circleProgress({
  93. value: 0.70
  94. });
  95. $(".react .bar").circleProgress({
  96. value: 0.60
  97. });
  98. </script>
  99.  
  100. </section>
  101.  
  102. CSS:
  103.  
  104. @import 'https://fonts.googleapis.com/css?family=Montserrat:300, 400, 700&display=swap';
  105. * {
  106. padding: 0;
  107. margin: 0;
  108. box-sizing: border-box;
  109. }
  110. html {
  111. font-size: 10px;
  112. font-family: 'Montserrat', sans-serif;
  113. scroll-behavior: smooth;
  114. }
  115. a {
  116. text-decoration: none;
  117. }
  118. .container {
  119. min-height: 100vh;
  120. width: 100%;
  121. display: flex;
  122. align-items: center;
  123. justify-content: center;
  124. }
  125. img {
  126. height: 100%;
  127. width: 100%;
  128. object-fit: cover;
  129. }
  130. p {
  131. color: black;
  132. font-size: 1.4rem;
  133. margin-top: 5px;
  134. line-height: 2.5rem;
  135. font-weight: 300;
  136. letter-spacing: 0.05rem;
  137. }
  138. .section-title {
  139. font-size: 4rem;
  140. font-weight: 300;
  141. color: black;
  142. margin-bottom: 10px;
  143. text-transform: uppercase;
  144. letter-spacing: 0.2rem;
  145. text-align: center;
  146. }
  147. .section-title span {
  148. color: lightgreen;
  149. }
  150.  
  151. .cta {
  152. display: inline-block;
  153. padding: 10px 30px;
  154. color: white;
  155. background-color: transparent;
  156. border: 2px solid lightgreen;
  157. font-size: 2rem;
  158. text-transform: uppercase;
  159. letter-spacing: 0.1rem;
  160. margin-top: 30px;
  161. transition: 0.3s ease;
  162. transition-property: background-color, color;
  163. }
  164. .cta:hover {
  165. color: white;
  166. background-color: lightgreen;
  167. }
  168. .brand h1 {
  169. font-size: 3rem;
  170. text-transform: uppercase;
  171. color: white;
  172. }
  173. .brand h1 span {
  174. color: lightgreen;
  175. }
  176.  
  177. /* Header section */
  178. #header {
  179. position: fixed;
  180. z-index: 1000;
  181. left: 0;
  182. top: 0;
  183. width: 100vw;
  184. height: auto;
  185. }
  186. #header .header {
  187. min-height: 8vh;
  188. background-color: rgba(31, 30, 30, 0.24);
  189. transition: 0.3s ease background-color;
  190. }
  191. #header .nav-bar {
  192. display: flex;
  193. align-items: center;
  194. justify-content: space-between;
  195. width: 100%;
  196. height: 100%;
  197. max-width: 1300px;
  198. padding: 0 10px;
  199. }
  200. #header .nav-list ul {
  201. list-style: none;
  202. position: absolute;
  203. background-color: rgb(31, 30, 30);
  204. width: 100vw;
  205. height: 100vh;
  206. left: 100%;
  207. top: 0;
  208. display: flex;
  209. flex-direction: column;
  210. justify-content: center;
  211. align-items: center;
  212. z-index: 1;
  213. overflow-x: hidden;
  214. transition: 0.5s ease left;
  215. }
  216. #header .nav-list ul.active {
  217. left: 0%;
  218. }
  219. #header .nav-list ul a {
  220. font-size: 2.5rem;
  221. font-weight: 500;
  222. letter-spacing: 0.2rem;
  223. text-decoration: none;
  224. color: white;
  225. text-transform: uppercase;
  226. padding: 20px;
  227. display: block;
  228. }
  229. #header .nav-list ul a::after {
  230. content: attr(data-after);
  231. position: absolute;
  232. top: 50%;
  233. left: 50%;
  234. transform: translate(-50%, -50%) scale(0);
  235. color: rgba(240, 248, 255, 0.021);
  236. font-size: 13rem;
  237. letter-spacing: 50px;
  238. z-index: -1;
  239. transition: 0.3s ease letter-spacing;
  240. }
  241. #header .nav-list ul li:hover a::after {
  242. transform: translate(-50%, -50%) scale(1);
  243. letter-spacing: initial;
  244. }
  245. #header .nav-list ul li:hover a {
  246. color: lightgreen;
  247. }
  248. #header .dings {
  249. height: 60px;
  250. width: 60px;
  251. display: inline-block;
  252. border: 3px solid white;
  253. border-radius: 50%;
  254. position: relative;
  255. display: flex;
  256. align-items: center;
  257. justify-content: center;
  258. z-index: 100;
  259. cursor: pointer;
  260. transform: scale(0.8);
  261. margin-right: 20px;
  262. }
  263. #header .dings:after {
  264. position: absolute;
  265. content: '';
  266. height: 100%;
  267. width: 100%;
  268. border-radius: 50%;
  269. border: 3px solid white;
  270. animation: dings_puls 1s ease infinite;
  271. }
  272. #header .dings .bar {
  273. height: 2px;
  274. width: 30px;
  275. position: relative;
  276. -color: white;
  277. z-index: -1;
  278. }
  279. #header .dings .bar::after,
  280. #header .dings .bar::before {
  281. content: '';
  282. position: absolute;
  283. height: 100%;
  284. width: 100%;
  285. left: 0;
  286. background-color: white;
  287. transition: 0.3s ease;
  288. transition-property: top, bottom;
  289. }
  290. #header .dings .bar::after {
  291. top: 8px;
  292. }
  293. #header .dings .bar::before {
  294. bottom: 8px;
  295. }
  296. #header .dings.active .bar::before {
  297. bottom: 0;
  298. }
  299. #header .dings.active .bar::after {
  300. top: 0;
  301. }
  302. /* End Header section */
  303.  
  304. /* Hero Section */
  305. #hero {
  306. background-color: black;
  307. }
  308. #hero::after {
  309. content: '';
  310. position: absolute;
  311. left: 0;
  312. top: 0;
  313. height: 100%;
  314. width: 100%;
  315. background-color: black;
  316. opacity: 0.7;
  317. z-index: -1;
  318. }
  319. #hero .hero {
  320. max-width: 1200px;
  321. margin: 0 auto;
  322. padding: 0 50px;
  323. justify-content: flex-start;
  324. }
  325. #hero h1 {
  326. display: block;
  327. width: fit-content;
  328. font-size: 4px;
  329. position: relative;
  330. color: transparent;
  331. animation: text_reveal 0.5s ease forwards;
  332. animation-delay: 1s;
  333. }
  334. #hero h1:nth-child(1) {
  335. animation-delay: 1s;
  336. }
  337. #hero h1:nth-child(2) {
  338. animation-delay: 2s;
  339. }
  340. #hero h1:nth-child(3) {
  341. animation: text_reveal_name 1s ease forwards;
  342. animation-delay: 3s;
  343. }
  344. #hero h1 span {
  345. position: absolute;
  346. top: 0;
  347. left: 0;
  348. height: 100%;
  349. width: 0;
  350. background-color: lightgreen;
  351. animation: text_reveal_box 1s ease;
  352. animation-delay: 0.5s;
  353. }
  354. #hero h1:nth-child(1) span {
  355. animation-delay: 0.5s;
  356. }
  357. #hero h1:nth-child(2) span {
  358. animation-delay: 1.5s;
  359. }
  360. #hero h1:nth-child(3) span {
  361. animation-delay: 2.5s;
  362. }
  363.  
  364. /* End Hero Section */
  365.  
  366. /* Services Section */
  367.  
  368. #services .services {
  369. flex-direction: column;
  370. text-align: center;
  371. max-width: 1500px;
  372. margin: 0 auto;
  373. padding: 100px 0;
  374. }
  375. #services .service-top {
  376. max-width: 500px;
  377. margin: 0 auto;
  378. }
  379. #services .service-bottom {
  380. display: flex;
  381. align-items: center;
  382. justify-content: center;
  383. flex-wrap: wrap;
  384. margin-top: 50px;
  385. }
  386.  
  387. @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
  388. *{
  389. margin: 0;
  390. padding: 0;
  391. box-sizing: border-box;
  392. font-family: 'Poppins', sans-serif;
  393. }
  394. .wrapper{
  395. width: 800px;
  396. display: flex;
  397. flex-wrap: wrap;
  398. align-items: center;
  399. justify-content: space-between;
  400. }
  401. .wrapper .card{
  402. background: #fff;
  403. width: calc(33% - 20px);
  404. height: 300px;
  405. border-radius: 5px;
  406. display: flex;
  407. align-items: center;
  408. justify-content: space-evenly;
  409. flex-direction: column;
  410. box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
  411. }
  412. .wrapper .card .circle{
  413. position: relative;
  414. height: 150px;
  415. width: 150px;
  416. border-radius: 50%;
  417. cursor: default;
  418. }
  419. .card .circle .box,
  420. .card .circle .box span{
  421. position: absolute;
  422. top: 50%;
  423. left: 50%;
  424. }
  425. .card .circle .box{
  426. height: 100%;
  427. width: 100%;
  428. background: #fff;
  429. border-radius: 50%;
  430. transform: translate(-50%, -50%) scale(0.8);
  431. transition: all 0.2s;
  432. }
  433. .card .circle:hover .box{
  434. transform: translate(-50%, -50%) scale(0.91);
  435. }
  436. .card .circle .box span,
  437. .wrapper .card .text{
  438. background: -webkit-linear-gradient(left, #a445b2, #fa4299);
  439. -webkit-background-clip: text;
  440. -webkit-text-fill-color: transparent;
  441. }
  442. .circle .box span{
  443. font-size: 38px;
  444. font-family: sans-serif;
  445. font-weight: 600;
  446. transform: translate(-45%, -45%);
  447. transition: all 0.1s;
  448. }
  449. .card .circle:hover .box span{
  450. transform: translate(-45%, -45%) scale(1.09);
  451. }
  452. .card .text{
  453. font-size: 20px;
  454. font-weight: 600;
  455. }
  456. @media(max-width: 753px){
  457. .wrapper{
  458. max-width: 700px;
  459. }
  460. .wrapper .card{
  461. width: calc(50% - 20px);
  462. margin-bottom: 20px;
  463. }
  464. }
  465. @media(max-width: 505px){
  466. .wrapper{
  467. max-width: 500px;
  468. }
  469. .wrapper .card{
  470. width: 100%;
  471. }
  472. }
  473.  
RAW Paste Data