昨日のイラスト
昨日のスクリプト
勉強と課外活動と、どうバランスを取っていくのかっていうのはかなり頭を抱える悩みになると思うのですが、個人的には最近になって整理がついた気がしてて。
ビル・ゲイツとかマーク・ザッカーバーグも、結局大学には行っていて、でも在学中に外で進めている活動が大きくなりすぎた結果大学を中退したわけです。
この「みんなが通る道」を残しながら、他の時間で事業を大きくして最終的に「みんなが通る道」から「降りざるを得ない状況」を作り出していくことが目標になるのかなと。
CODING MANUAL
今回はすごくイケてるデザインになったと思います。
ドッツの色を変えると同時にサイズを少し大きくしたりも考えたのですが、レイアウトが崩れてしまったので次回以降に後回し。
<div class="timeline_whole">
<div class="timeline">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 495 1709">
<defs>
<style>
.cls-1 {
fill: #e86b79;
}
.cls-2 {
fill: none;
stroke: #e86b79;
stroke-miterlimit: 10;
stroke-width: 8px;
}
</style>
</defs>
<g id="レイヤー_2" data-name="レイヤー 2">
<g id="レイヤー_1-2" data-name="レイヤー 1">
<rect
class="cls-1 ball1"
x="326"
width="169"
height="169"
rx="84.5"
/>
<rect
class="cls-1 ball2"
x="127"
y="308"
width="169"
height="169"
rx="84.5"
/>
<rect
class="cls-1 ball3"
x="23"
y="616"
width="169"
height="169"
rx="84.5"
/>
<rect
class="cls-1 ball4"
y="924"
width="169"
height="169"
rx="84.5"
/>
<rect
class="cls-1 ball5"
x="85"
y="1232"
width="169"
height="169"
rx="84.5"
/>
<rect
class="cls-1 ball6"
x="296"
y="1540"
width="169"
height="169"
rx="84.5"
/>
<path class="cls-2" d="M410.6,49.94s-734,922,0,1596" />
</g>
</g>
</svg>
</div>
<div class="text_timeline">
<h3 class="timeline_1">生まれるかも<span>2003</span></h3>
<h3 class="timeline_2">生まれるのか<span>2004</span></h3>
<h3 class="timeline_3">生まれるんだろうか<span>2005</span></h3>
<h3 class="timeline_4">生まれるのでしょうか<span>2006</span></h3>
<h3 class="timeline_5">生まれる！？<span>2007</span></h3>
<h3 class="timeline_6">生まれるわけない<span>2008</span></h3>
</div>
</div>.timeline_whole {
@include flex(row, space-between);
max-width: 350px;
margin: 1000px auto 1000px auto;
.timeline {
width: 50%;
.ball1 {
fill: #ff69b4;
}
}
.text_timeline {
width: 40%;
@include flex(column, space-between);
h3 {
span {
display: block;
font-size: 0.8;
}
}
.timeline_2,
.timeline_3,
.timeline_4,
.timeline_5,
.timeline_6 {
display: none;
opacity: 0;
}
}
}timeline = new TweenMax.to(".timeline", 0.5, { scale: 1.2 });
var timeline_scene = new ScrollMagic.Scene({
triggerElement: ".timeline_whole",
triggerHook: 0,
duration: 1000,
})
.setPin(".timeline")
.setTween(timeline)
.addTo(controller);
var tl_timeline = new TimelineMax();
var timeline1 = tl_timeline
.to(".timeline_1", 2, { opacity: 0 })
.set(".timeline_1", { display: "none" })
.set(".timeline_2", { display: "block" })
.to(".timeline_2", 2, { opacity: 1 }) //
.to(".timeline_2", 2, { opacity: 0 })
.set(".timeline_2", { display: "none" })
.set(".timeline_3", { display: "block" })
.to(".timeline_3", 2, { opacity: 1 }) //
.to(".timeline_3", 2, { opacity: 0 })
.set(".timeline_3", { display: "none" })
.set(".timeline_4", { display: "block" })
.to(".timeline_4", 2, { opacity: 1 }) //
.to(".timeline_4", 2, { opacity: 0 })
.set(".timeline_4", { display: "none" })
.set(".timeline_5", { display: "block" })
.to(".timeline_5", 2, { opacity: 1 }) //
.to(".timeline_5", 2, { opacity: 0 })
.set(".timeline_5", { display: "none" })
.set(".timeline_6", { display: "block" })
.to(".timeline_6", 2, { opacity: 1 }); //
var timeline_scene_text = new ScrollMagic.Scene({
triggerElement: ".timeline_whole",
triggerHook: 0,
duration: 1000,
})
.setPin(".text_timeline")
.setTween(timeline1)
.addTo(controller);
var tl_timeline_ball = new TimelineMax();
var timeline_ball = tl_timeline_ball
.to(".ball1", 1, { fill: "#E86B79" })
.to(".ball2", 1, { fill: "#FF69B4" })
.to(".ball2", 1, { fill: "#E86B79" })
.to(".ball3", 1, { fill: "#FF69B4" })
.to(".ball3", 1, { fill: "#E86B79" })
.to(".ball4", 1, { fill: "#FF69B4" })
.to(".ball4", 1, { fill: "#E86B79" })
.to(".ball5", 1, { fill: "#FF69B4" })
.to(".ball5", 1, { fill: "#E86B79" })
.to(".ball6", 1, { fill: "#FF69B4" });
var timeline_scene_ball = new ScrollMagic.Scene({
triggerElement: ".timeline_whole",
triggerHook: 0,
duration: 1000,
})
.setTween(timeline_ball)
.addTo(controller);コード長めだけど結構整理されてると思うっ