お疲れ様です。
この方のサイトの最初の名前が表示される所からサイトの全体の構造が表示される所までがかっこよくて私も参考にしたいと思ったのですが、最初の名前の左の文字から斜めに降ってくるところが難しくてよくわかりません。
左の文字を筆頭に斜めに降りてくる(アニメーションで)ここがわかりません。
HTML
<html> <head> <title>Mysite/YuugoHayashi</title> <link rel="stylesheet" type="text/css" href="css/index.css"><!--index.cssのリンク--> <link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR" rel="stylesheet"><!--h1のgooglefont--> </head> <body> <div id="wrapper"><!---wrappperエリアの開始--> <div id="text_inner"><!--mask_textエリアの開始--> <h1>Yuugo Hayashi</h1> <!--containerエリアの--> <div id="container"></div> </div><!--mask_textエリアの終了--> </div><!--wrapperエリアの終了--> <script type="text/javascript" src="js/jquery-2.0.2.min.js"></script><!--jQueryのリンク--> <script> $(function(){//jQueryの実行書式 $('#text_inner h1').animate({ 'marginTop': '20px', 'transform': 'rotate(-10deg)' },1000);//animaete });//function </script> </body> </html
以下,CSS
margin:0; padding:0; } li{ list-style-position: outside; list-style-type: none; } div{ box-sizing: border-box; } a{ text-decoration:none; } #wrapper{ background-color:black; width:100%; height:100vh; } #text_inner{ width:11%; position:absolute; top:46%; left:45%; padding:10px; transform:rotate(-2deg); } h1{ color:#FFFFFF; top:50%; left:40%; font-family: 'Noto Sans KR', sans-serif; font-size:1.2em; } #container{ margin: 20px; width: 400px; height: 8px; }
以下、参考にしたサイトです。
CSSやアニメーションに詳しい方いらっしゃいましたらアドバイスいただけると嬉しいです。
宜しくお願い致します。
回答2件
あなたの回答
tips
プレビュー